元素的居中问题是每个初学者碰到的第一个大问题，在此我总结了下各种块级 行级 水平 垂直 的居中方法，并尽量给出代码实例。
首先请先明白块级元素和行级元素的区别
块级元素
块级元素水平居中
1：margin: 0 auto
element { margin: 0 auto; }
2：负边距+绝对定位
.outside { width:500px; height:200px; background-color: red; margin:100px auto; position: relative; } .inner { width: 100px; height:50px; background-color: yellow; position: absolute; // 绝对定位 left:50%; // + margin-left: -50px; // 负边距
}
3： 弹性盒子flexbox：
.outside { width:500px; height:200px; background-color: red; margin:100px auto; position: relative; display: flex; // 父元素display:flex; justify-content: center; // 主轴上居中对齐 } .inner { background-color: yellow; height:100px; width: 50px; }
块级元素垂直居中（元素高度已知）：
1： 利用负边距+绝对定位
.outside { width:720px; height: 720px; margin: 0 auto ; position: relative; /*祖先元素的非static定位*/ } .inner { width: 350px; height: 350px; position: absolute; top: 50%; /*元素相对其最近的position属性不为static的元素(祖先元素)移动50%，top、right、bottom和left属性指定定位元素的位置。*/ margin-top: -175px; /*元素向上移动自身的50%，此时，正好垂直居中*/ }
2. 弹性盒子flexbox：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test</title> <style> .outside { width:300px; height: 200px; margin:100px auto; background-color: red; display: flex; // 弹性盒子 align-items: center; // 弹性盒子 } .inner { width:50px; height: 30px; background-color: yellow; } </style> </head> <body > <div class="outside"> <div class="inner"> inner </div> </div> </body> </html>
3. 绝对定位+父元素position非static+子元素transform
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test</title> <style> .outside { width:300px; height: 200px; margin:100px auto; background-color: red; position: relative; // 父元素非static } .inner { width:50px; height: 30px; background-color: yellow; position: absolute; top:50%; transform: translateY(-50%); // 相对于自身高度，向上移动50% } </style> </head> <body > <div class="outside"> <div class="inner"> inner </div> </div> </body> </html>
块级元素垂直居中（元素高度未知）：
1. position:absolute + transform属性
利用transform的translate()或translateY()方法
1 <!--Html 代码--> 2 <div class="outside"> 3 <div class="inner"> 4 </div> 5 </div>
1 /*Css 代码*/ 2 .outside { 3 background-color: #5555ee; 4 width:720px; 5 height: 720px; 6 margin: 0 auto ; 7 position:relative; 8 9 } 10 .inner { 11 width: 350px; 12 height: 350px; 13 background-color: #ee5555; 14 position: absolute; 15 top:50%;/*相对祖先元素向下移动50%*/ 16 transform: translateY(-50%);/*元素y轴移动自身的一半*/ 17 transform: translate(,-50%);/*元素y轴移动自身的一半,与上一行效果相同*/ 18 }
2 position:absolute + margin-top:auto + margin-bottom:auto
利用上边距，下边距在垂直方向的auto
<head> <style type="text/css"> .outside { width: 300px; height: 300px; background-color: red; margin: 60px auto; position: relative; } .inside { width: 150px; height: 150px; background-color: black; position: absolute; 首先是父元素与子元素的position属性值要“配套”好，这样子元素的top,bottom才可以发挥应有的作用 top:30px; bottom:30px; 当垂直方向上的margin为auto时，不论是margin-left，margin-right,还是margin:auto, auto总是会试图充满整个父元素， margin: auto 4px; 30px,30px,auto的“配合”是此方法有效果的关键所在。子元素被要求拉伸到top:30px;bottom:30px;(两个值必须一样，这样才居中)，但因为高度被固定而做不到这一点，所以margin:auto;就让它居中了。 } </style> </head> <body> <div class="outside"> <div class="inside"></div> </div> </body>
3 flexbox弹性盒子
<!--Html 代码--> <div class="outside"> <div class="inner"> </div> </div>
3.1 设置direction:row或是direction:columns
.outside { display: flex; flex-direction: column; /*主轴方向设为垂直方向*/ justify-content: center; /*主轴方向上的元素的对齐方式*/ } .outside { display: flex; flex-direction: row; /*默认主轴方向就是row*/ align-items: center; /*交叉轴上的元素的对齐方式*/ }
3.2 目前来说最简单的方法：
.outside { display: flex; } .inner { margin: auto; }
二 行级元素
水平居中：
{
text-align:
}
垂直居中：