各种居中系列

方法①：

margin:0 auto

实现水平居中（必须满足的条件是固定宽度元素）

方法②：

text-align:center

实现水平居中(测试后在父元素中设置，块级或行内元素可实现，除图片

<img>

外。其中若父级为块级，子元素也为块级则设置子元素

display:inline-block

)

方法③：

line-height:自身高度

实现垂直居中

方法④：table表格

<td>

标签中默认垂直居中，若设置

text-align:center

在ie6,ie7能水平垂直居中，但在ie8+、主流浏览器中的块级元素则无效果，但若将此块级元素设置

display:inline-block

可实现

方法⑤：模拟表格渲染 (关键字

display:table-cell

) 实现水平垂直居中

<div id="container">
<div id="content">content</div>
</div>

#container {
height: 300px;
display: table;/*让元素以表格形式渲染*/
}
#content {
display:table-cell;/*让元素以表格的单元素格形式渲染*/
vertical-align: middle;/*使用元素的垂直对齐*/
}

方法⑥：负边距+绝对定位 此方法为杀手锏 (将父元素相对定位

relative

，子元素绝对定位且

top:50%,left:50%

此时子元素的左上角点位于父元素的中心位置，所以再加上负边距类似的把子元素”拉回来”,margin-left:负子元素宽度/2，margin-top:负子元素高度/2)

<div class="parent">
<div class="children"></div>
</div>

.parent {
position:relative;
margin:0 auto;
width:200px;
height:200px;
background-color:red;
}
.children {
position:absolute;
left:50%;
top:50%;
margin:-25px 0 0 -25px ;
height:50px;
width:50px;
background-color: black;
}

方法⑦：transform居中 (这个是针对不定宽的元素要居中使用的方法) 它配合方法⑥中的绝对定位具体体现,比如上次我遇到的水平垂直居中一个checkbox，宽度不定就使用此方法

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

方法⑧：css3_flex (此方法自己也不太熟悉，所以转了个网友的方法)

<div class="parent">
<div class="children">我是通过flex的水平垂直居中噢！</div>
</div>

html,body{
width: 100%;
height: 200px;
}
.parent {
display:flex;
align-items: center;/*垂直居中*/
justify-content: center;/*水平居中*/
width:100%;
height:100%;
background-color:red;
}
.children {
background-color:blue;
}

常见的面试水平垂直居中问题：

1.水平垂直居中一个浮动元素 (方法⑥->负边距+绝对定位)

2.水平垂直居中一个

<img>

元素 (方法⑥->负边距+绝对定位)

3.水平垂直居中一个行内元素 (方法②+方法③->父元素中text-align:center;line-height:固定高度)

欢迎大家指出错误 共同学习 Caristop3