各种各样的水平垂直居中

1.垂直居中

1.高度固定 单行文本

思路：使用line-height = height。

html：

<!--父元素高度确定,单行文本-->
<div class="wrap">
    <div class="num">你好呀</div>
</div>

css：

 *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            background-color: violet;
            width: 300px;
            height: 300px;
        }
        .num{
            height: 300px;
            width: 300px;
            line-height: 300px;
        }

运行结果：

2.高度固定 多行文本

思路：父类display:table。子类display:table和vertical-align:middle。

html：

<!--父元素高度确定,多行文本-->
<div class="wrap">
    <div class="num">你好呀收费公司我还是任何人jet进入太空vy</div>
</div>

css：

    *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            background-color: violet;
            width: 300px;
            height: 300px;
            display:table;
        }
        .num{
            display: table-cell;
            height: 300px;
            width: 300px;
            vertical-align: middle;
        }

运行结果：

兼容性：除了IE6,IE7都支持

3.高度未知

（1）方法1

思路：使用position:absolute设置top，left，margin-left和margin-top即可。

这也是我最常用的方法。哈哈

html：

<!--父元素高度不确定-->
<div class="wrap"></div>

css：

  *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            position: absolute;
            background-color: violet;
            width: 300px;
            height: 300px;
            top: 50%;
            margin-top: -150px;
        }

运行结果：

这种方法基本浏览器都能够兼容，不足之处就是需要固定宽高。

这里的margin-top：-150px也可以改为css3的transform：translateY：-50%

（2）方法2

思路：使用flex

注意了：目前支持的浏览器仅：IE10+,Firefox2+,Chrome4+,Safari3。
看到IE10 ，感觉这家伙用不上了。

html:

<!--父元素高度不确定-->
<div class="wrap">
    <div class="inner">biubiubiu</div>
</div>

css:

 *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            background-color: violet;
            width: 300px;//宽高可以不设
            height: 300px;//宽高可以不设
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            align-items: center;//这句还实现了水平居中
        }
        .inner{
        }

运行结果：

还要考虑各种兼容性的问题。目前不适用呀。

4.当被居中的元素是inline或inline-block时

父元素display:table-cell 和vertical-align:middle

html:

<!--inline-block-->
<div class="wrap">
    <div class="num">biubiubiu</div>
</div>

css:

  *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            background-color: violet;
            width: 300px;
            height: 300px;
            display:table-cell;
            vertical-align: middle;
        }
        .num{
            display: inline-block;
        }

运行结果：

1.水平居中

1.行内元素水平居中

text-align:center;

2.块状元素水平居中

margin:0 auto;

3.多块状元素水平居中

思路：display：inline

html:

<div class="b">

    <div class="wrap"></div>
    <div class="wrap"></div>
    <div class="wrap"></div>
    <div class="wrap"></div>
    <div class="wrap"></div>
    <div class="wrap"></div>
</div>

css:

       *{
            margin: 0;
            padding: 0;
        }
        .b{
            text-align: center;
            font-size: 0;
        }
        .wrap{
            width: 100px;
            height: 100px;
            display:inline-block;
            border:solid 1px black;
        }

运行结果：

父元素设置font-size：0；可以使inline-block元素之间间隙为0
父元素设置text-align：center可以使iinline-block居中