css学习笔记之水平居中

学习来源：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