CSS 元素垂直水平居中方式

1、已知高度和宽度的元素解决方案1定位

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .fa {
        width: 300px;
        height: 300px;
        background-color: aqua;
        margin: 100px auto;
        position: relative;
    }

    .son {
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        position: absolute;
        margin: auto;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
</style>
<div class="fa">
    <div class="son"></div>
</div>

2、已知高度和宽度的元素解决方案2定位

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .fa {
        width: 300px;
        height: 300px;
        background-color: aqua;
        margin: 100px auto;
        position: relative;
    }

    .son {
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -100px; /* 设置margin-left / margin-top 为自身高度的一半 */
        margin-left: -100px;
    }
</style>
<div class="fa">
    <div class="son"></div>
</div>

3、已知高度和宽度的元素解决方案3margin+padding

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .fa {
        width: 300px;
        height: 300px;
        background-color: aqua;
        margin: 100px auto;
        padding: 50px 0;//父元素与子元素高度差除以二
        box-sizing: border-box;
    }

    .son {
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        margin: 0 auto ;//水平居中
       //或者可以margin：0 50px;//父元素与子元素宽度差除以二
    }
</style>
<div class="fa">
    <div class="son"></div>
</div>

4、已知高度和宽度的元素解决方案4padding

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .fa {
        width: 300px;
        height: 300px;
        background-color: aqua;
        margin: 100px auto;
        padding: 50px;//父元素与子元素高度差除以二
        box-sizing: border-box;
    }

    .son {
        width: 200px;
        height: 200px;
        background-color: aquamarine;
    }
</style>
<div class="fa">
    <div class="son"></div>
</div>

5、未知高度和宽度元素解决方案

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .fa {
        width: 300px;
        height: 300px;
        background-color: aqua;
        margin: 100px auto;
        position: relative;
    }

    .son {
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* 使用css3的transform来实现 */
    }
</style>
<div class="fa">
    <div class="son"></div>
</div>

6、使用flex布局实现

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .fa {
        margin: 100px auto;
        width: 300px;
        display: flex;
        justify-content: center;//水平居中
        align-items: center;//垂直居中
        /* 注意这里需要设置高度来查看垂直居中效果 */
        background: aqua;
        height: 300px;
}

    .son {
        width: 200px;
        height: 200px;
        background-color: aquamarine;
}
</style>
<div class="fa">
    <div class="son"></div>
</div>

7、利用display的table-cell属性值 +vertical-align

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .fa {
        display: table-cell;
        vertical-align: middle;
        background-color: aqua;
        width: 300px;
        height: 300px;
    }

    .son {
        margin: 0 auto;
        background-color: aquamarine;
        width: 100px;
        height: 100px;
}
</style>
<div class="fa">
    <div class="son"></div>
</div>