学习来源:http://www.cnblogs.com/xiaohuochai/p/5437503.html
text-align
在父元素中设置text-align:center实现行内元素水平居中,若子元素为块级元素,将子元素设置为display:inline-block,使子元素变成行内元素。
若要兼容IE7-浏览器,可使用display:inline;zoom:1;来达到inline-block的效果
[注意] 子元素的text-align继承了父元素的center,文字也居中显示,所以需要在子元素中设置text-align:left。
margin
在本身元素设置margin: 0 auto实现块级元素水平居中。但是块级元素默认是占满一行的。
1)若未设置宽度,将(div)元素设置为display:table,使元素成为块级元素,同时table还具有包裹性,宽度由内容撑开
若要兼容IE7-浏览器,可把child的结构换成<table class="child">DEMO</table>
2)若设置宽度,直接使用即可。
absolute
1)配合relative
relative数值型的偏移属性是相对于自身的,但百分比却是相对于包含块的。需要在子元素外面和父元素之间在增加一层<div>结构,使其宽度与子元素宽度相同,用来当做包含块。
.parent{
position: relative;
}
.childWrap{
position: absolute;
left: 50%; //以窗口宽度 偏移到中间位置 但是是最左侧在中间 整体并未在中间 多往右了child的一半
}
.child{
position: relative;
left: -50%; //childWrap的宽度和child一样 往左回偏一半的宽度
}
<div class="parent" style="background-color: gray;height: 20px;">
<div class="childWrap">
<div class="child" style="background-color: lightblue;">DEMO</div>
</div>
</div>
[注意]该方法全兼容,但是增加了html结构
flex
使用弹性盒模型flex实现水平居中
[注意]IE9-浏览器不支持
1)在伸缩容器上设置主轴对齐方式justify-content:center
2)在伸缩项目上设置margin: 0 auto