div在各种情况下的居中

这里根据以往经验，总结了div居中的各种情况，请大家使劲拍我~

1、水平方向：一般情况下块状元素居中

    给div设置宽度，添加margin:0 auto;

例如：

<span style="font-size:14px;">div{
width:500px;
height:300px;
margin:0 atuo;
background-color:pink;//为显示效果，添加背景颜色
}</span>

2、水平方向：浮动元素的居中

给div设置宽度、高，添加margin

例如：

<span style="font-size:14px;">.div{
width:400px;
height:300px;
float:left;
position:relative;
margin:0 0 0 -200px;
background-color:pink;
top:50%;
left:50%;
}</span>

3、水平方向：绝对定位的元素居中

<span style="font-size:14px;">.div{
width:400px;
height:300px;
background-color:pink;
position:absolute;
top:0;
left:50%;
margin-left:-200px;
}</span>

4、水平方向：不定宽块状元素的居中

加入table标签，设置display：inline,同时设置position：relative和left：50%（理论上可行，但不推荐这样做，加入table标签会造成一系列问题）

 

<span style="font-size:14px;">.div{
display:inline;
position:relative;
left:50%;
}</span>

5、水平方向：多个块状元素的居中

将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center

<span style="font-size:14px;">.parent{
text-align: center;
}
.div{
width:100px;
height:100px;
display:inline-block;
}
</span>

6、水平居中：多个块状元素解决方案 (使用flexbox布局实现)

使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center

<span style="font-size:14px;">.parent{
display:flex;
justify-content:center;
}
.div{
width:100px;
height:100px;
}</span>

7、垂直居中-父元素高度确定的单行文本

设置父元素的height和line-height高度一致
8、垂直居中-父元素确定的多行文本/图片/块级元素

1)插入table标签，同时设置vertical-align:middle;//IE8以下（不推荐使用table）

2）设置块级元素的display:table-cell,激活vertical-align设置为middle

9、垂直居中-已知高度的块状元素

<span style="font-size:14px;">.div{
top: 50%;
margin-top: -100px;  /* margin-top值为自身高度的一半 */
position: absolute;
padding:0;
}
</span>