一. 水平居中

1. 行内元素水平居中

父元素设置

text-align:center;

2. 块级元素水平居中

元素自身加

margin: auto;

  <style>
    .parent{
      border: 2px solid #66FFFF ;
      text-align: center;
    }
    p{ border: 2px solid #999; }
    .son{
      border: 2px solid #777;
      width: 100px;
      height: 50px;
      margin: 0  auto;
    }
  </style>
<body>
  <div class="parent">
     <p>13131311313133</p>
    <div class="son">son</div>
  </div>
</body>

二. 垂直居中

1. Flex 垂直居中

只需要父元素加

 display: flex;
 justify-content:center ;
 align-items: center;

示例：

  <style>
    body{
      height: 100vh;
    }
    .parent{
      border: 2px solid #66ffff;
      height: 200px;
      display: flex;
      justify-content:center ;
      align-items: center;
    }
    .son{
      width: 200px;
      height: 100px;
      border: 2px solid #333;
    }
    p{
      text-align:center;
      word-break: break-all;
    }
   </style>

<body>
<div class="parent">
  <div class="son">
    <p>13131333131131222222222223333333333333</p>
  </div>
</div>
</body>

预览地址

文字垂直居中
预览链接

用 Flex 来做居中的话，我只要先指定容器为一个 Flex 容器，然后 justify-content 让他水平方向居中，再 align-items 让他垂直方向居中。我可以很简单很优雅的就做到居中。

2. position 垂直居中

①. 不知父元素宽高 (通用方法)

父元素(宽高未知)

position:relative;

子元素(宽高未知)

  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%)

示例：

  <style>
    body{
      height: 100vh;
    }
    .parent{
      position:relative;
      border:2px solid #66ffff ;
      height: 30%;
    }
    .son{
     width: 50%;
      height: 50%;
      border: 2px solid #333;
      position: absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%)
    }
    p{
      text-align: center;
      word-break: break-all;
    }
   </style>
<body>
<div class="parent">
  <div class="son">
   <p>position 通用垂直居中</p>
  </div>
</div>
</body>

预览地址

①. 已知父元素宽高

利用margin代替transform来居中
css如下

 <style>
    .parent{
      position:relative;
      border:2px solid #66ffff ;
      width: 300px;
      height: 150px;
    }
    .son{
      width: 200px;
      height: 100px;
      border: 2px solid #333;
      position: absolute;
      top:0;
      left: 0;
      margin-left:25px ;
      margin-top:50px;
    }
   </style>

position缺点：少了变化，不利于响应式布局。目前对我来说，position用的最少。

3. Float 垂直居中

  <style>
   .parent{
      border:2px solid #66ffff ;
      width: 400px;
      height: 200px;
    }
    .son{
      width: 200px;
      height: 100px;
      border: 2px solid #333;
      float:right;
      margin-top:50px;
      margin-right:100px;
    }
    .clearfix::after{
      content:'';
      display:block;
      clear :both;
    }
    p{
      text-align: center;
      word-break: break-all;
    }
   </style>

<div class="parent clearfix">
  <div class="son">
    <p>float垂直居中</p>
  </div>
</div>

预览链接

4. margin 垂直居中

   body{
      height: 100vh;
    }
    .parent{
      border:2px solid #66ffff ;
      width: 400px;
      height: 200px;
    }
    .son{
      width: 200px;
      height: 100px;
      border: 2px solid #333;
      margin:  50px auto;
    }
    p{
      text-align: center;
      word-break: break-all;
    }

预览链接

5. 文字的垂直居中

line-height+ padding

子元素line-height + padding-top +padding-bottom = 父元素height

 .parent{
      border:2px solid #66ffff ;
      height: 100px;
   }
    p{
      margin:0;
      line-height:60px;
      padding:20px 0;
      text-align: center;
      word-break: break-all;
      border: 2px solid #333;
    }

预览链接

image.png