CSS实现水平垂直居中的几种方式

前两天，笔试题中遇到过，只写出了一种方式，今天学习并整理了这几种方式。

仅居中元素定宽高适用：

1、absolute + 负margin；

2、absoulte + margin auto；

3、absoulte + calc；

居中元素不定宽高

1、absolute + transform；

2、lineheight；

3、writing-mode；

4、table；

5、css-table；

6、flex；

7、grid；

一、absolute + 负margin

首先，我们把需要的html代码和css代码先写出来：

<style>
    .parent{
        border:1px solid blue;
        width: 400px;
        height: 400px;
    }
    .children{
        background: #9c72b0;
    }
    .children.size{
      width: 100px;
        height: 100px;
    }

</style>

<div class="parent">
    <div class="children size"></div>
</div>

parent是父元素的类名，children是子元素的类名，因为有定宽和不定宽的区别，所以size用来表示指定宽度。

绝对定位的百分比是相对于父元素的宽高，通过这个特性可以让子元素的居中显示，但绝对定位是基于子元素的左上角，期望的效果是子元素的中心居中显示。

为了解决这个问题，可以借助外边距的负值，负的外边距可以让元素向相反方向定位，通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了。

.parent{
    position: relative;
}
.children{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

效果图：

二、absolute + margin auto

这种方式必须要求居中元素的宽高必须固定，通过设置各个方向的距离都是0，此时再讲margin设为auto，就可以在各个方向上居中了。

.children{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

效果图：

三、absolute + calc

这种方式也要求居中元素的宽高必须固定，所以我们为children增加size类，感恩css3带来了计算属性，既然top的百分比是基于元素的左上角，那么减去宽度的一半就可以。

.children{
    position: absolute;
    top:  calc(50% - 50px);
    left: calc(50% - 50px);
}

效果图：

四、absolute + transfrom

还是绝对定位，但是这个方法不需要子元素固定宽高，所以不需要size类了。

修复绝对定位的问题，还可以使用css3新增的transfrom，transfrom的translate属性也可以设置百分比，其实是相对于自身的宽高，所以translate设置为-50%，就可以做到居中。

.children{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

五、lineheight

利用行内元素居中属性也可以做到水平垂直居中。把children设为行内元素，通过text-align就可以做到水平居中，使用vertical-align也可以在垂直方向做到居中。

.parent{
    line-height: 400px;
    text-align: center;
    font-size: 0px;
}
.children{
    font-size: 16px;
    display: inline-block;
    vert-align: middle;
    line-height: initial;
    text-align: left;
}

效果图如下：

六、writing-mode

writing-mode可以改变文字的显示方向，比如可以改变writing-mode让文字的显示变为垂直方向。

.parent{
    writing-mode: vertical-lr;
    text-align: center;
}
.parent-inner{
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.children{
    display: inline-block;
    margin: auto;
    text-align: left;
}

效果图如下：

七、table

table经常被用来做页面布局，但其实table也能够用来实现水平垂直居中，但是会增加很多冗余的代码。

.parent{
    text-align: center;
}
.children{
    display: inline-block;
}

<table>
    <tbody>
    <tr>
        <td class="parent">
            <div class="children">table</div>
        </td>
    </tr>
    </tbody>
</table>

效果图：

八、 css-table

css新增的table属性，可以让我们把普通元素，变为table元素的显示效果，通过这个特性也可以实现水平垂直居中。

.parent{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.children{
    display: inline-block;
}

效果图如下：

九、flex

flex作为现在比较流行的布局，只需要几行代码就可以优雅的做到水平垂直居中。

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
}

十、grid

css新出的网格布局。

.parent{
    display: grid;
}
.children{
    align-self: center;
    justify-self: center;
}

效果图如下：

CSS实现水平垂直居中的几种方式

猜你喜欢