CSS水平居中与垂直居中的方法
一、水平居中
1、行内元素水平居中
在父元素里添加text-align：center即可。代码如下：
<style> .container-1 { height: 50px; border: 2px solid grey; margin-bottom: 50px; /* 行内元素水平居中 */ text-align: center; } </style> <div class="container-1"> <span>this is item1</span> </div>
效果图：
2、块级元素水平居中
（1）方法一：使用绝对定位和margin负值（缺点：若子元素宽高改变，margin值也要跟着改变）
（2）方法二：使用绝对定位和transform（缺点：存在兼容性问题）
（3）方法三：使用绝对定位和margin：auto（推荐）
（4）方法四：使用flex布局的justify-content：center（缺点：存在兼容性问题）
代码如下：
1 <style> 2 /* @块级元素水平居中方法： */ 3 /* 方法一：使用绝对定位和margin负值*/ 4 .container-2 { 5 position: relative; 6 height: 100px; 7 border: 3px solid blue; 8 margin-bottom: 50px; 9 } 10 11 .item2 { 12 position: absolute; 13 height: 50px; 14 width: 300px; 15 left: 50%; 16 /* 向左平移宽度的一半 */ 17 margin-left: -150px; 18 background-color: burlywood; 19 } 20 21 /* 方法二：使用绝对定位和transform */ 22 .container-3 { 23 position: relative; 24 height: 200px; 25 border: 5px solid rgb(182, 60, 12); 26 margin-bottom: 50px; 27 } 28 29 .item3 { 30 position: absolute; 31 left: 50%; 32 /*水平方向向左平移自身宽度的50%*/ 33 transform: translateX(-50%); 34 background-color: yellow; 35 } 36 37 /* 方法三：使用绝对定位和margin：auto*/ 38 .container-4 { 39 position: relative; 40 height: 100px; 41 border: 4px solid green; 42 margin-bottom: 50px; 43 } 44 45 .item4 { 46 position: absolute; 47 left: 0%; 48 right: 0%; 49 height: 50px; 50 width: 500px; 51 background-color: pink; 52 /* 平分子元素左右的剩余空间 */ 53 margin: auto; 54 } 55 56 /* 方法四：使用flex布局 */ 57 .container-5 { 58 display: flex; 59 height: 100px; 60 border: 4px solid rgb(27, 164, 189); 61 margin-bottom: 50px; 62 /* 主轴方向默认为水平方向，使用justify-content实现居中对齐 */ 63 justify-content: center; 64 } 65 66 .item5 { 67 height: 50px; 68 width: 500px; 69 background-color: rgb(194, 255, 192); 70 } 71 </style> 72 <div class="container-2"> 73 <div class="item2">使用绝对定位和margin负值</div> 74 </div> 75 <div class="container-3"> 76 <div class="item3">使用绝对定位和transform</div> 77 </div> 78 <div class="container-4"> 79 <div class="item4">使用绝对定位和margin：auto</div> 80 </div> 81 <div class="container-5"> 82 <div class="item5">使用flex布局</div> 83 </div>
效果图：
二、垂直居中
1、行内元素垂直居中
当line-hight等于height时，可实现行内元素垂直居中，代码如下：
1 <style> 2 .container-1 { 3 height: 50px; 4 border: 2px solid grey; 5 margin-bottom: 50px; 6 /* 行内元素水平垂直居中 */ 7 text-align: center; 8 line-height: 50px;//行高与高相等可实现垂直居中 9 } 10 </style> 11 <div class="container-1"> 12 <span class="item1">this is item1</span> 13 </div>
效果图：
2、块级元素垂直居中
（1）方法一：使用绝对定位和margin负值（缺点：若子元素宽高改变，margin值也要跟着改变）
（2）方法二：使用绝对定位和transform（缺点：存在兼容性问题）
（3）方法三：使用绝对定位和margin：auto（推荐）
（4）方法四：使用flex布局，改变主轴方向为垂直方向再使用justify-content：center（缺点：存在兼容性问题）
代码如下：
<style> /* @块级元素垂直居中方法： */ /* 方法一：使用绝对定位和margin负值*/ .container-2 { position: relative; height: 100px; border: 3px solid blue; margin-bottom: 50px; } .item2 { position: absolute; height: 50px; width: 300px; top: 50%; /* 向上平移高度的一半 */ margin-top: -25px; background-color: burlywood; } /* 方法二：使用绝对定位和transform */ .container-3 { position: relative; height: 300px; border: 5px solid rgb(182, 60, 12); margin-bottom: 50px; } .item3 { position: absolute; height: 100px; width: 300px; top: 50%; /* 垂直方向向上平移自身高度的50% */ transform: translateY(-50%); background-color: yellow; } /* 方法三：使用绝对定位和margin：auto*/ .container-4 { position: relative; height: 100px; border: 4px solid green; margin-bottom: 50px; } .item4 { position: absolute; top: 0%; bottom: 0%; height: 50px; width: 500px; background-color: pink; /* 自动平分上下的剩余空间 */ margin: auto; } /* 方法四：使用flex布局 */ .container-5 { display: flex; height: 100px; border: 4px solid rgb(27, 164, 189); margin-bottom: 50px; /* 将主轴方向改为垂直方向 */ flex-direction: column; /* 对齐方式对居中对齐 */ justify-content: center; } .item5 { height: 50px; width: 500px; background-color: rgb(194, 255, 192); } </style> <div class="container-2"> <div class="item2">使用绝对定位和margin负值</div> </div> <div class="container-3"> <div class="item3">使用绝对定位和transform</div> </div> <div class="container-4"> <div class="item4">使用绝对定位和margin：auto</div> </div> <div class="container-5"> <div class="item5">使用flex布局</div> </div>
效果图：
若想实现水平垂直居中，结合二者一起使用即可。
参考文档
https://www.jianshu.com/p/7bbc4860a45c
