css 居中总结

1.定宽块状元素 水平居中

<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/

    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}

</style>

2.不定宽块状元素 水平居中

1.加入到table标签，再设置margin,或如下
.wrap{
    background:#ccc;
    display:table;
    margin:0px auto;
}
<div class="wrap">
  设置我所在的div容器水平居中  
</div>

2.display:inline+textalign:center;
它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。

3.通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
.wrap{
    float:left;
    position:relative;
    left:50%;
    clear:both;
}
.wrap-center{
    background:#ccc;
    position:relative;
    left:-50%;
}
<div class="wrap">
    <div class="wrap-center">我们来学习一下这种方法。</div>
</div>

3.父元素高度确定的单行文本 垂直居中

.wrap h2{
    margin:0;
    height:100px;
    line-height:100px;
    background:#ccc;
}
<div class="wrap">
    <h2>Hello World!</h2>
</div>