如何实现水平/垂直/水平垂直居中？

水平居中

行内元素

如果父元素是块级元素，那么直接给父元素设置text-align:center

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
    }
</style>

<div id="father">
    <span id="son">行内元素</span>
</div>

如果父元素不是块级元素，那么可以给父元素设置块级元素，然后再设置text-align:center

<style>
    #father {
        display: block;
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
    }
</style>

<div id="father">
    <span id="son">行内元素</span>
</div>

块级元素

给定宽度

可以设置margin: 0, auto;（使得盒子自己居中）

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }
    
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        margin: 0 auto;
    }
</style>

<div id="father">
    <div id="son">块级元素</div>
<div>

不给定宽度

这是子元素的默认宽度等于父元素的宽度，给子元素转换成行内块级元素或行内元素，即将子元素设置成display: inline-block;或display: inline;,同时给父元素设置成text-align: center;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
    }
    
    #son {
        background-color: green;
        display: inline/inline-block;
        
    }
</style>

<div id="father">
    <div id="son">块级元素</div>
</div>

使用定位属性

将父元素设置为相对定位position: relative;,再将子元素设置为绝对定位position: absolute;,同时设置子元素左上角水平居中，即left: 50%;。

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
    }
    
    #son {
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
</style>
<div id="father">
    <div id="son">块级元素</div>
</div>

使用flexbox布局实现

使用flexbox布局，需要将待处理的块级元素的父元素添加属性display: flex;justify-content:center;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        justify-content: center;
    }
    
    #son {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

<div id="father">
    <div id="son">块级元素</div>
</div>

垂直居中

单独的行内元素

将需要设置单行行内元素的“行高等于盒子的高”

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: green;
    }
    #son {
        background-color: red;
        line-height: 300px;
    }
</style>
<div id="father">
    <span id="son">单独的行内元素</span>
</div>

多行的行内元素

给父元素设置display: table-cell;和vertical-align: middle;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: pink;
        display: table-cell;
        vertical-align: middle;
    }
    
    #son {
        background-color: skyblue;
    }
</style>

<div id="father">
    <span id="son">多行行内元素</span>
</div>

块级元素

（1）使用定位 将父元素设置为相对定位，将子元素设置为绝对定位，设置子元素的top:50%,即让子元素的左上角垂直居中。

定高度：设置子元素margin-top: -子元素高度的一半或者transform: translateY(-50%);

<style>
#father {
    width: 500px;
    height: 300px;
    background-color: pink;
    position: relative;
}

#son {
    height: 100px;
    background-color: lightgreen;
    position: absolute;
    top: 50%;
    margin-top: -50px;
}
</style>
<div id="father">
    <div id="son">块级元素</div>
</div>

不给定高度：利用CSS3新增属性transform: translateY(-50%);

<style>
#father {
    width: 500px;
    height: 300px;
    background-color: pink;
    position: relative;
}

#son {
    height: 100px;
    background-color: lightgreen;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
</style>
<div id="father">
    <div id="son">块级元素</div>
</div>

使用flexbox布局实现

使用flexbox布局，只需要将待处理的块级元素的父元素设置为display: flex;align-items:center;

<style>
#father {
    width: 500px;
    height: 300px;
    background-color: pink;
    display: flex;
    align-items: center;
}

#son {
    height: 100px;
    background-color: lightgreen;
}
</style>
<div id="father">
    <div id="son">块级元素</div>
</div>

水平垂直居中

已知高度和宽度的元素

（1）将父元素设置为相对定位，子元素设置为绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: pink;
        position: relative;
    }
    
    #son {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }
</style>
<div id="father">
    <div id="son">块级元素</div>
</div>

(2)将父元素设置为相对定位，将子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: pink;
        position: relative;
    }
    
    #son {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        position: absolute;
        left: 50%;
        top: 50%
        margin-left: -50px;
        margin-top: -50px;
    }
</style>
<div id="father">
    <div id="son">块级元素</div>
</div>

不知高度和宽度的元素

（1）使用定位元素 将父元素设置为相对定位，将子元素设置为绝对定位，left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%)

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: pink;
        position: relative;
    }
    
    #son {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
    }
</style>
<div id="father">
    <div id="son">块级元素</div>
</div>

(2)使用flex布局实现 将父元素设置为flex布局,justify-content: center; align-items: center;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: pink;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    #son {
        background-color: skyblue;
    }
</style>
<div id="father">
    <div id="son">块级元素</div>
</div>