各种居中的css实现

一、文本居中

　　文本的水平居中text-align:center;

　　文本的垂直居中设置行高即可line-height：20px;

二、行内元素的居中

vertival-align是相对兄弟的行高来定位，所有加一个空的兄弟使得高度等于父盒子

    #box{
        width: 800px;
        height: 800px;
        border: 1px solid red;
        text-align: center;
    }
    img{
        vertical-align: middle;
    }
    #block{
        height:100%;//和父盒子一样高
    }
<div id='box'>
　　<img src='a.png'>
　　<img id='block'>
</div>

三、盒子的居中方法

1.text-align实现水平居中

text-align用于设置盒子的内容水平居中（文本属性，子盒子可继承），要设置子盒子水平居中，设置display：inline-block；

    #box{
        width: 400px;
        height: 400px;
        border: 1px solid red;
        text-align: center;
    }
    #child{
        width: 50px;
        height: 50px;
        border: 1px solid blue;
        display: inline-block;
    }

2.margin：0 auto；设置水平居中

使用注意点：盒子不能浮动，盒子要有宽度

3.绝对定位实现垂直水平居中，要知道宽高

先用top：50%;left:50%;将盒子左上角放在父盒子中心点，在用负margin将子盒子向上拉一半，向左拉一半

    #box{
        width: 400px;
        height: 400px;
        border: 1px solid red;
        position: relative;
    }
    #child{
        width: 50px;
        height: 50px;
        border: 1px solid blue;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top:-25px;
        margin-left: -25px;
    }

4.flex，最简单

    #box{
        width: 400px;
        height: 400px;
        border: 1px solid red;
        display: flex;
        /*水平居中*/
        justify-content:center;
        /*垂直居中*/
        align-items:center;
    }
    #child{
        width: 50px;
        height: 50px;
        border: 1px solid blue;
    }

5.transform，类似负margin拉回元素，不过不需要居中元素的宽高

    #box{
        height: 400px;
        border: 1px solid red;
        position: relative;
    }
    #child{
        border: 1px solid blue;
        position: absolute;
        top: 50%;
        left:50%;
        transform:translate(-50%,-50%);//相对于居中元素
    }

6.无视居中元素的宽高

    #box{
        height: 400px;
        border: 1px solid red;
        position: relative;
    }
    #child{
        width: 50px;
        height: 50px;
        border: 1px solid blue;
        position: absolute;
        top:0;
        left: 0;
        right: 0;
        bottom: 0;
        margin:auto;
    }