CSS 垂直居中

一. 水平居中

1. 行内元素水平居中

父元素设置

text-align:center;

2. 块级元素水平居中

元素自身加

margin: auto;

  

  

     
13131311313133
    
son
  

二. 垂直居中

1. Flex 垂直居中

只需要父元素加

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

示例：

  



  

    
13131333131131222222222223333333333333
  

预览地址

文字垂直居中
预览链接

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

2. position 垂直居中

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

父元素(宽高未知)

position:relative;

子元素(宽高未知)

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

示例：

  


  

   
position 通用垂直居中
  

预览地址

①. 已知父元素宽高

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

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

3. Float 垂直居中

  


  

    
float垂直居中
  

预览链接

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