1、水平方向:一般情况下块状元素居中这里根据以往经验,总结了div居中的各种情况,请大家使劲拍我~
给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>