常见水平垂直居中问题

常见居中问题

在编写HTML和CSS时会遇到许多元素水平、垂直居中的问题。这里，总结了一些网上看到的各种各样的解决方案，方便以后查阅，也希望更多的人可以学习。

一、文字水平居中

//适用于文字、链接、inline、inline-block、inline-table和inline-flex的元素。
#outer{
    text-align:center;
}

二、块级元素水平居中

#inner{
    margin: 0px auto;
}

三、多个块级元素水平居中

1、text-align 和 display

#outer{
    text-align:center;
}
#inner{
    display:inline-block;
}

2、flexbox实现（默认块级元素）

#outer{
    display:flex;
    /* 按照主轴中心的位置对齐 */
    justify-content:center;
}

四、未知宽高行内块元素（input , img）水平垂直居中

.outerBox{
    float: left;
    width: 300px;
    height: 300px;
    background-color: black;

    /*核心*/  
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.innerImg{
    width: 100px;
    height: 80px;
    background-color: white;
}

五、div(块级元素)水平垂直居中

1、需要知道宽高，top,left设为 50% 在用margin拉回宽高的一半。

.outer1{
    float: left;
    width: 300px;
    height: 300px;
    background-color: greenyellow;  

    /*核心*/          
    position: relative;   
}
.inner1{
    width: 100px;
    height: 80px;
    background-color: palevioletred;

    /*核心*/  
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -50px;
}

2、未知宽高，绝对定位+margin（好用）

.outer2{
    float: left;
    width: 300px;
    height: 300px;
    background-color: plum; 

    /*核心*/          
    position: relative;
}
.inner2{
    width: 100px;
    height: 80px;
    background-color: cornflowerblue;

    /*核心*/  
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

3、未知宽高，transform实现

.outer3{
    float: left;
    width: 300px;
    height: 300px;
    background-color: purple;

    /*核心*/              
    position: relative;
}
.inner3{
    width: 100px;
    height: 80px;
    background-color: cornflowerblue;

    /*核心*/  
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
}

4、flex布局实现

#container{
    display:flex;
    /* 按照主轴中心的位置对齐 */
    justify-content:center;
    /* 交叉轴水平位置对齐 */
    align-items: center;
}

总结

transform和flexbox需要考虑兼容问题