css 水平居中 垂直居中 水平垂直居中

一、水平居中

      1、行内元素水平居中      text-align :center

     2、块级元素水平居中      margin:0  auto 

     3、多个块状元素的水平居中    

      实现多个水平排列的块状元素的水平居中，是将要水平排列的块状元素设为display:inline-block，然后在父级元素上设置text-align:center，达到与上面的行内元素的水平居中一样的效果。

二、垂直居中

  1、行内或类行内元素垂直居中  

  对于单行行内或者文本元素，只需为它们添加等值的 padding-top 和 padding-bottom 就可以实现垂直居中；

  对于多行文本，同样可以使用等值 padding-top 和 padding-bottom 的方式实现垂直居中。如果在使用过程中发现这种方法没见效，那么可以通过 CSS 为文本设置一个类似 table-cell 的父级容器，然后使用 vertical-align 属性实现垂直居中；

 可以使用 flexbox 实现垂直居中，对于父级容器为 display: flex 的元素来说，它的每一个子元素都是垂直居中的；

 2、块级元素  

  已知元素的高度  

  无法获知元素的具体高度是非常常见的一种状况，比如：视区宽度变化，会触发布局重绘，从而改变高度；对文本施加不同的样式会改变高度；文本的内容量不同会改变高度；当宽度变化时，对于宽高比例固定的元素（比如图片），也会自动调整高度……  如果我们知道元素的高度，可以这样来实现垂直居中： 

 .parent {   position: relative; } 

 .child {   position: absolute;   top: 50%; 

               height: 100px;   margin-top: -50px; /* account for padding and border if not using 

               box-sizing: border-box; */ }

未知元素的高度  

  如果不知道元素的高度，那么就需要先将元素定位到容器的中心位置，然后使用 transform 的 translate 属性，将元素的中心和父容器的中心重合，从而实现垂直居中： 

 .parent {   position: relative; 

  } 

 .child {   position: absolute;  

               top: 50%;  

               transform: translateY(-50%);

          }

三、水平垂直居中

宽高固定元素  

  设定父级容器为相对定位的容器，设定子元素绝对定位的位置 position: absolute; top: 50%; left: 50%，最后使用负向 margin 实现水平和垂直居中，margin 的值为宽高（具体的宽高需要根据实际情况计算 padding）的一半。  

 .parent {   position: relative; } 

 .child {   width: 300px;  

  height: 100px;  

  padding: 20px;   

  position: absolute;   

  top: 50%;  

  left: 50%;   

  margin: -70px 0 0 -170px;

  }

 宽高不固定元素  

  如果无法获取确定的宽高，同样需要设定父级容器为相对定位的容器，设定子元素绝对定位的位置 position: absolute; top: 50%; left: 50%。不同的是，接下来需要使用 transform: translate(-50%, -50%); 实现垂直居中：

  .parent {   position: relative; }

 .child {   position: absolute;  

  top: 50%; 

  left: 50%;  

  transform:

  translate(-50%, -50%);

 }   

flexbox  

使用 flexbox 实现水平和垂直居中，只需使用两条居中属性即可： 

 .parent {   display: flex;   

                  justify-content: center;  

                  align-items: center;

           }