几种常见的垂直居中的方法

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>几种居中对齐的方式</title>
    <style>
        /*第一种*/
        .parent1 {
            border: 1px solid red;
            height: 500px;
        }
        .parent1 .child1 {
            border: 5px solid red;
        }
        /*第二种*/
        .table{
            display: table;
            border: 1px solid red;
            height: 500px;
        }
        .td {
            display: table-cell;
            border: 3px solid blue;
            vertical-align: middle;
        }
        .table .child {
            border: 1px solid red;
        }
        /*第三种*/
        .parent3 {
            border: 3px solid red;
            height: 500px;
            text-align: center;
        }
        .child3 {
            border: 3px solid black;
            display: inline-block;
            width: 300px;
            vertical-align: middle;
        }
        .parent3::before {
            content:'';
            border: 3px solid red;
            display: inline-block;
            height: 100%;
            vertical-align: middle;
            /*使用时将border边框去掉*/
        }
        .parent3::after {
            content:'';
            border: 3px solid red;
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
        /*第四种*/
        .parent4 {
            height: 500px;
            border: 1px solid red;
            position: relative;
        }
        .child4 {
            border: 1px solid red;
            width: 300px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -50px;
        }
        /*第五种*/
        .parent5 {
            height: 500px;
            border: 1px solid red;
            position: relative;
        }
        .child5 {
            border: 1px solid green;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        /*第六种*/
        .parent6 {
            height: 500px;
            border: 1px solid red;
            position: relative;
        }
        .child6 {
            border: 1px solid green;
            position: absolute;
            width: 300px;
            height: 200px;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
        /*第七种*/
        .parent7 {
            height: 500px;
            border: 3px solid red;

            display: flex;
            justify-content: center;
            align-items: center;
        }
        .child7 {
            border: 3px solid green;
            width: 300px;
        }
        /*第八种*/
        .parent8 {
            border: 3px solid red;
        }
        .child8 {
            /*width: 400px;*/
            margin: 100px auto;
            padding: 100px 0;
            border: 3px solid red;
        }
    </style>
</head>
<body>
  <h2>1.table自带的居中</h2>
  <table class="parent1">
      <td class="child1">
          由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。CSS hack 就是这种情况下我们针对不同的浏览器去写不同的CSS的一个过程，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
      </td>
  </table>
  <h2>2.用div伪装成table</h2>
  <div class="table">
      <div class="td">
          <div class="child">由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。CSS hack 就是这种情况下我们针对不同的浏览器去写不同的CSS的一个过程，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果</div>
      </div>
  </div>
  <h2>3.用伪元素::before ::after在.child前构建与父元素等高的伪元素</h2>
  <div class="parent3">
      <div class="child3">
          由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。CSS hack 就是这种情况下我们针对不同的浏览器去写不同的CSS的一个过程，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
      </div>
  </div>
  <h2>4.使用绝对定位top50% left50% margin-top与margin-left为height和weight的一半</h2>
  <div class="parent4">
      <div class="child4">
          由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。CSS hack 就是这种情况下我们针对不同的浏览器去写不同的CSS的一个过程，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
      </div>
  </div>
  <h2>5.第四种在不知道.child的高度宽度用css3可实现居中</h2>
  <div class="parent5">
      <div class="child5">
          由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。CSS hack 就是这种情况下我们针对不同的浏览器去写不同的CSS的一个过程，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
      </div>
  </div>
  <h2>6.绝对定位margin auto</h2>
  <div class="parent6">
      <div class="child6">
          由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。CSS hack 就是这种情况下我们针对不同的浏览器去写不同的CSS的一个过程，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
      </div>
  </div>
  <h2>7.用flex</h2>
  <div class="parent7">
      <div class="child7">
          由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。CSS hack 就是这种情况下我们针对不同的浏览器去写不同的CSS的一个过程，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
      </div>
  </div>
  <h2>8. .parent高度不知用padding: 10px 0</h2>
  <div class="parent8">
      <div class="child8">由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。CSS hack 就是这种情况下我们针对不同的浏览器去写不同的CSS的一个过程，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。</div>
  </div>
</body>
</html>
各种方法的效果
能不写.parent的height就不写给.child写width与height时注意文本的溢出
几种常见的垂直居中的方法

推荐阅读更多精彩内容
