css---各种居中垂直详解

项目中经常会有各种居中的布局，什么垂直居中，水平居中，垂直水平居中，已知宽高和未知宽高居中，那么接下来就整体的总结一下，方便以后使用，也在此记录一下。

一、行内文字、链接水平居中

这个相对简单，行内元素直接加上 text-align:center; 即可

二、单个块儿元素水平居中

将该元素加上 margin:0 auto; 即可

三、多个块儿元素水平居中，将父级设置 text-align:center; 子元素设置 display: inline-block; 

四、单行内元素垂直居中

将 line-height 与 height 设置为同一值，即行高与父元素高度相同

五、多行内元素垂直居中

模拟表格单元,然后用 vertical-align 进行控制位置，父级元素设置

        display: table-cell;

        vertical-align: middle;

六、块儿元素垂直居中

使用绝对定位 position: absolute; 定位50%，然后在 margin-top 拉回居中元素的高度一半

        width:100px;

        height:100px;

        background:rgb(20,77,221);

        position: absolute;

        top:50%;

        margin-top:-50px;

七、已知宽高元素垂直居中

大体和上一个方法一样，使用绝对定位position: absolute; 左、上定位50%，然后在 margin-top margin-left 拉回居中元素的高度一半

        width:100px;

        height:100px;

        background:rgb(20,77,221);

        position: absolute;

        top:50%;

        left:50%;

        margin-top:-50px;

        margin-left:-50px;

八、未知宽高元素水平垂直居中

        父级元素要设置 position:relative

        position: absolute; 

        left:50%;

        transform:translate(-50%, -50%);

九、flex布局 实现居中

        父级元素    display: flex;

                           height:500px;

                           background:#03A1FA;

        子级元素    width:100px;

                           height:100px;

                           margin: auto;

                           background:#BB3713;