CSS居中布局

1、水平居中

<div class="parent">
    <div class="child">DEMO</div>
</div>

（1）inline-block + text-align

text-align设置在块级元素上时，可对其内部的inline元素起作用。


<style>
    .child{
        display: inline-block;
    }
    .parent{
        text-align: center;
    }
</style>

（2）table + margin

 当未table设置宽 100% 时，其宽度为内容的宽度。且可对table设置 margin auto。
<style>
    .child{
        display: table;
        margin: 0 auto;
    }
</style>

（3）absolute + transform

tranform 中的 translate 的参照物是自身。
<style>
    .parent{
        position: relative;
    }
    .child{
        position: absolute;
        left: 50%; 
        transform: translateX(-50%);
    }
</style>

（4）flex + justify-content

<style>
    .parent{
        display: flex;
        justify-content: center;
    }
</style>
或
<style>
    .parent{
        display: flex;
    }
    .child{
        margin: 0 auto;
    }
</style>

2、垂直居中

<div class="parent">
    <div class="child">DEMO</div>
</div>

（1）table-cell + vertical-align

<style>
    .parent{
        display: table-cell;
        vertical-align: middle;
    }
</style>

（2）absolute + transform

tranform 中的 translate 的参照物是自身。
<style>
    .parent{
        position: relative;
    }
    .child{
        position: absolute;
        top: 50%; 
        transform: translateY(-50%);
    }
</style>

（3）flex + align-items

flex 的 align-items 默认是拉升的
<style>
    .parent{
        display: flex;
        align-items: center;
    }
</style>

3、水平垂直居中

<div class="parent">
    <div class="child">DEMO</div>
</div>

（1）inline-block + text-align + table-cell + vertical-align

<style>
    .child{
        display: inline-block;
    }
    .parent{
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }
</style>

（2）absolute + transform

tranform 中的 translate 的参照物是自身。
<style>
    .parent{
        position: relative;
    }
    .child{
        position: absolute;
        top: 50%;
        left: 50%; 
        transform: translate(-50%, -50%);
    }
</style>

（3）flex + align-items + justify-content

flex 的 align-items 默认是拉升的
<style>
    .parent{
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>