垂直居中 - Newbie_小白

1、垂直居中（为了看到效果，所以设置了高度）

<!DOCTYPE >
<html>
<head>
    <title></title>
    <meta name="name" content="content">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <style type="text/css">
        .container{
            position: relative;
            width: 50%;
            height: 400px;
            border: 1px black solid;
        }
        .container div{
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            height: 100px;
            display: inline-block;
            border: 1px red solid;
        }
    </style>
</head>
<body>
  <div class="container">
    <div>
        <p>我是div里面的p元素</p>
    </div>
</div>
</body>
</html>

2、自适应高度垂直居中，但是不支持ie6、7

<!DOCTYPE >
<html>
<head>
    <title></title>
    <meta name="name" content="content">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <style type="text/css">
        ul,li{
            list-style: none;
            width: 400px;
        }
        .clearfix {
            zoom: 1;
        }

        .clearfix:after {
            content: "";
            clear: both;
            display: block;
        }
        li{
            position: relative;
            display: table;
            *display: table;
            table-layout:fixed;
            border:1px black solid;
        }
        li p{
            display: table-cell;  
            vertical-align: middle;  
            padding: 6px 15px;
            width: 16.667%;
            text-align: center;
            border:1px red solid; 
            box-sizing:border-box;
        }
    </style>
</head>
<body>
  <ul>
      <li class="clearfix">
        <p>第</p>
        <p>第二</p>
        <p>第三栏</p>
        <p>第四栏哈</p>
        <p>第四栏哈哈</p>
        <p>第四栏哈哈哈</p>
    </li>
</ul>
</body>
</html>

3、单行文本垂直居中

  <p style=" width: 300px;height: 50px;line-height: 50px;border:1px red solid;">单行内容垂直居中</p>

4、多行文本垂直居中

  <p style=" width: 300px;padding:16px 25px;border:1px red solid;">多行内容垂直居中多行内容垂直居中多行内容垂直居中多行内容垂直居中多行内容垂直居中多行内容垂直居中</p>

5、多行文本垂直居中（不支持ie6、7）

  <p style=" width: 300px;display: table-cell;height: 300px;vertical-align: middle;border:1px red solid;">多行内容垂直居中多行内容垂直居中多行内容垂直居中多行内容垂直居中多行内容垂直居中多行内容垂直居中</p>

6、ie浏览器垂直居中

<!DOCTYPE >
<html>
<head>
  <title></title>
  <meta name="name" content="content">
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <style type="text/css">
    .wrap{
      height: 300px;
      position: relative;
      border: 1px red solid
    }
    .content{
      position: absolute;
      top: 50%;
      left: 0;
    }
    .text{
      position: relative;
      top: -50%;
      left: 0;
      border: 1px green solid;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="content">
      <div class="text">多行内容垂直居中多行内容垂直居中多行内容垂直居中多行内容垂直居中多行内容垂直居中多行内容垂直居中</div>
    </div>
  </div>
  <p style=" width: 300px;display: table-cell;height: 300px;vertical-align: middle;border:1px red solid;display: none;">多行内容垂直居中多行内容垂直居中多行内容垂直居中多行内容垂直居中多行内容垂直居中多行内容垂直居中</p>  
</body>
</html>

7、兼容ie

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>index</title>
  <style>
    html,body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .wrap{
      width: 400px;
      height: 400px;
      border: 1px red solid;
    }
    .content {
      width: 60px;
      /*height: 300px;*/
      background: orange;
      margin: 0 auto; /*水平居中*/
      position: relative; /*脱离文档流*/
      top: 50%; /*偏移*/
      transform: translateY(-50%);
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="content">垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中</div>
  </div>
</body>
</html>

8、flex

<!DOCTYPE >
<html>
<head>
  <title></title>
  <meta name="name" content="content">
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <style type="text/css">
    .parent {
      display: flex;
      width: 100%;
      height: 300px;
      background: #cecece;
      align-items: center; /* 垂直居中 */
      justify-content: center; /* 水平居中 */
    }

    .child {
      background: #000;
      width: 10%;
      height: 10%;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

posted on 2017-07-03 14:37 Newbie_小白阅读(183) 评论(0) 收藏举报