前端--实现垂直居中的方法

1、针对行内、行内块元素

height: 198px;
line-height: 198px;
text-align: center;
复制代码

2、定位实现

这种方法比较简单，设置 position:absolue;或者position:fixed，详细如下：

margin负值法

/*position: absolute;*/
position: fixed;
top:50%;
left: 50%;
width: 120px;
height: 120px;
margin-left: -50px;
margin-top:-50px;
复制代码

• 优点： 所有浏览器都支持
• 缺点： 元素宽高固定，灵活性不好

3、定位实现，元素宽高不固定

margin:auto法

/*position: absolute;*/
position: fixed;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
复制代码

• 优点： 元素宽高可以任意变化
• 缺点： IE6,IE7不支持

4、 display: table-cell--未脱离文档流的

display: table-cell;
vertical-align: middle;
width: 900px;
height: 200px;
text-align: center;
/*float: left;*/
复制代码

注意：

• 出现浮动就不能用display:table-cell
• 只能实现行内、行内块元素居中，如果内部是块级元素的话，水平不能居中，这时在内部块级元素上设置margin:auto可以实现水平居中

缺点： IE7不支持 外层盒子高度确定table-cell，外层高度不确定外层再套一层设置display:table 如下：

.outer-table{
    display: table;
    width: 100%;
    height: 100%;
}
复制代码

5、 css3方法（IE9以下不支持*）

• 第一种

display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
复制代码

flex布局

display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
复制代码

• 第二种

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
复制代码

6、 使用dispaly：inline-block 和 vertical-align 还有伪类实现--推荐

注意： 只有inline-block，inline还有table的东西能用vertical-align这个属性

/*第9种---最好的--以参考线为基准*/
        /*使用dispaly：inline-block 和 vertical-align 还有伪类实现*/
        .div10{
            height: 500px;
            text-align: center;
            background-color: #f00;
        }
        .div10:before{
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
            background-color: #000;
        }
        .inner10{
            display: inline-block;
            width: 100px;
            vertical-align: middle;
            background-color: #0f0;
        }
html结构
<div class="div10">
    <div class="inner10">cwq</div>
</div>

复制代码