css水平垂直居中的各种方式

css水平垂直居中的各种方式

1. flex布局实现水平垂直居中

   .parent {
     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
     flex-direction: column; /* 子元素垂直排列，默認row水平排列 */
   }
   

2. 绝对定位实现水平垂直居中

   .parent {
   	position: relative;
   }
   .parent .child{
       position: absolute;
       top: 50% ;
       left: 50% ;
       transform: translate(-50% , -50% );
   }
   

3. 绝对定位实现水平垂直居中,已知子元素的高度和宽度的情况

   .parent {
           position: relative;
       }
       .parent .child{
           position: absolute;
           top: 50%;
           left: 50%;
           width:200px;
           height:100px;
           margin-top: -50px;    /* 高度的一半 */
           margin-left: -100px;    /* 宽度的一半 */
       }
   

4. 利用margin:auto和绝对定位实现水平垂直居中，兼容性高

   .parent {
       position: relative;
   }
   .parent .child{
       position: absolute;
       left: 0;
       top: 0; 
       right: 0; 
       bottom: 0;
       margin: auto;
   }
   

5. table-cell布局实现水平垂直居中，table-cell将其变成单元格显示，vertical-aling就会生效

       
       .parent{
           display:table-cell;
           vertical-align:middle;
           text-align: center;
   
       }
       
   .parent .child{
   	display:inline-block;
   }
   

6. 水平居中，兼容性高，父元素需要指定宽度

   .parent .child{
           width:50px;
           height: 50px;
           margin:0 auto;
       }
   

7. 文字内容的水平居中，这个text-align其实一般是标记在父标签，然后让一些行内元素和行内块元素的子标签进行水平居中

   .parent{
         
           text-align: center;
   
       }
   

8. 单行文字的垂直居中，可以设置文字所在的行的height和行高的样式高度一致就行

   div{
   	width:100px;
     height: 50px;
     line-height:50px;
   }
   

9. 利用vertical-align的基线对齐,设置一个空标签class的temp的div，这样img就能垂直居中，vertical-align一般作用于行内标签和行内块标签

   <div class="parent">
           <img src="3001684910559_.pic_hd.jpg" class="child"></img>
           <div class="temp" ></div>
       </div>
       
       .parent{
           width: 500px;
           height:500px;
           background-color: red
   
       }
   
       .parent .child{
           height: 50px;
           height: 50px;
           vertical-align:middle;
       }
   
       .parent .temp{
           vertical-align:middle;
           display: inline-block;
           height:100%;
           width:1px;
           margin-left:-1px;
       }