水平垂直居中

absolute + 负margin

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

为了修正这个问题，可以借助外边距的负值，负的外边距可以让元素向相反方向定位，通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了，css代码如下

<style>
    .parent{
        position: relative;
        border: 1px solid red;
        width: 300px;
        height: 300px;
    }
    .children{
        position: absolute;
        background: yellow;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
    }
    .children.size{
        width: 100px;
        height: 100px;
    }
</style>
<div class="parent">
    <div class="children size">child</div>
</div>

这种方式比较好理解，兼容性也很好，缺点是需要知道子元素的宽高

absolute + margin auto

这种方式也要求居中元素的宽高必须固定

<style>
    .parent1{
        position: relative;
        border: 1px solid red;
        width: 300px;
        height: 300px;
    }
    .children1{
        position: absolute;
        background: yellow;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    .children1.size1{
        width: 100px;
        height: 100px;
    }
</style>
<div class="parent1">
    <div class="children1 size1">
        child1
    </div>
</div>

这种方法兼容性也很好，缺点是需要知道子元素的宽高

absolute + calc

既然top的百分比是基于元素的左上角，那么在减去宽度的一半就好了，代码如下

<style>
    .parent2{
        position: relative;
        border: 1px solid red;
        width: 300px;
        height: 300px;
    }
    .children2{
        position: absolute;
        background: yellow;
        top: calc(50% - 50px);
        left: calc(50% - 50px);
    }
    .children2.size2{
        width: 100px;
        height: 100px;
    }
</style>
<div class="parent2">
    <div class="children2 size2">
        child2
    </div>
</div>

这种方法兼容性依赖calc的兼容性，缺点是需要知道子元素的宽高

absolute + transform

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

<style>
    .parent3{
        position: relative;
        border: 1px solid red;
        width: 300px;
        height: 300px;
    }
    .children3{
        position: absolute;
        background: yellow;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    .children3.size3{
        width: 100px;
        height: 100px;
    }
</style>
<div class="parent3">
    <div class="children3 size3">
        child3
    </div>
</div>

这种方法兼容性依赖translate2d的兼容性

lineheight

把box设置为行内元素，通过text-align就可以做到水平居中，通过vertical-align也可以在垂直方向做到居中，代码如下

<style>
    .parent4{
        line-height: 300px;
        text-align: center;
        font-size: 0px;
        border: 1px solid red;
        width: 300px;
        height: 300px;
    }
    .children4{
        background: yellow;
       font-size: 16px;
        display: inline-block;
        vertical-align: middle;
        line-height: initial;
        text-align: left;
    }
    .children4.size4{
        width: 100px;
        height: 100px;
    }
</style>
<div class="parent4">
    <div class="children4 size4">
        child4
    </div>
</div>

这种方法需要在子元素中将文字显示重置为想要的效果

flex

flex作为现代的布局方案，颠覆了过去的经验，只需几行代码就可以优雅的做到水平垂直居中

<style>
    .parent5{
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid red;
        width: 300px;
        height: 300px;
    }
    .children5{
        background: yellow;
    }
    .children5.size5{
        width: 100px;
        height: 100px;
    }
</style>
<div class="parent5">
    <div class="children5 size5">
        child5
    </div>
</div>

目前在移动端已经完全可以使用flex了，PC端需要看自己业务的兼容性情况

grid

通过grid也可以实现水平垂直居中

<style>
    .parent6{
        display: grid;
        border: 1px solid red;
        width: 300px;
        height: 300px;
    }
    .children6{
        background: yellow;
        align-self: center;
        justify-self: center;
    }
    .children6.size6{
        width: 100px;
        height: 100px;
    }
</style>
<div class="parent6">
    <div class="children6 size6">
        child6
    </div>
</div>