CSS实现水平垂直居中

让元素垂直居中是我们在开发中经常碰到的需求，下面是我整理出元素垂直居中的几种方法。

场景一：行内元素居中

单行文字在块级元素中的水平垂直居中: text-align + line-height

代码示例:

/* HTML */
<div class="box">hello world</div>

/* CSS */
.box{
    background-color: #F9E79F;
    height: 200px;

    text-align: center; /* 行内元素水平居中 */
    line-height: 200px; /* line-height:设置成和高度一致 */
}

多行文字在块级元素中的垂直居中: table + vertical-align

代码示例:

/* HTML */
<div class="box">
    <span>我是多行文本我是我行文本我是多行文本</span>
</div>

/* CSS */
.box{
    background-color: #F9E79F;
    height: 200px;
    width: 200px;

    display: table;
}

span{
    display: table-cell;
    vertical-align: middle;
}

场景二：块级元素居中

定宽块级元素的水平居中: margin: 0 auto;

代码示例:

/* HTML */
<div class="container">
    <div class="box">定宽元素</div>
</div>

/* CSS */
.container{
    height: 200px;
    background-color: #F9E79F;
}

.box{
    height: 100px;
    background-color: #ABEBC6;

    width: 100px;
    margin: 0 auto;
}

不定宽块级元素的水平居中: table + margin:0 auto;

代码示例:

/* HTML */
<div class="container">
    <div class="box">不定宽元素</div>
</div>

/* CSS */
.container{
    height: 200px;
    background-color: #F9E79F;
}

.box{
    height: 100px;
    background-color: #ABEBC6;

    display: table;
    margin: 0 auto;
}

不定宽块级元素的水平居中: inline-block + text-align

代码示例:

/* HTML */
<div class="container">
    <div class="box">不定宽元素</div>
</div>

/* CSS */
.container{
    height: 200px;
    background-color: #F9E79F;
    	
    text-align: center; /* 设置给要居中元素的父元素 */
}

.box{
    height: 100px;
    background-color: #ABEBC6;

    display: inline-block; /* 将要居中的元素设置为行内块元素 */
}

场景三：垂直水平居中

1、绝对定位 + margin

注：这种情况下，若居中元素未设置高宽，则会和距离它最近的带有定位的祖先级元素高宽一致。

代码示例:

/* HTML */
<div class="container">
    <div class="box">我要水平垂直居中</div>
</div>

/* CSS */
.container{
    height: 200px;
    background-color: #F9E79F;

    position: relative; /* 注：父元素要设置相对定位 */
}

.box{
    background-color: #ABEBC6;
    
    width: 200px;
    height: 100px;

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

2、绝对定位 + 负margin值

注：这种方式与第一种差不多，不同的是设置top和left值为50%，然后通过负的margin值为居中元素宽高的一半，来解决定位差距。

代码示例:

/* HTML */
<div class="container">
    <div class="box">我要水平垂直居中</div>
</div>

/* CSS */
.container{
    height: 200px;
    background-color: #F9E79F;

    position: relative; /* 注：父元素要设置相对定位 */
}

.box{
    background-color: #ABEBC6;
    
    width: 200px;
    height: 100px;

    position: absolute;
    top: 0;
    left: 0;
    margin-top: -50px;  /* margin-top的值为该元素高度一半的复数 */
    margin-left: -100px; /* margin-left的值为该元素宽度度一半的复数 */
}

3、绝对定位 + transform

注：这种方式与第二种差不多，不同的是通过transform中的translate来让居中元素水平向左移动宽度的一半，垂直向上移动高度的一半，来解决定位差距。

代码示例:

/* HTML */
<div class="container">
    <div class="box">我要水平垂直居中</div>
</div>

/* CSS */
.container{
    height: 200px;
    background-color: #F9E79F;

    position: relative; /* 注：父元素要设置相对定位 */
}

.box{
    background-color: #ABEBC6;
    
    width: 200px;
    height: 100px;

    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%,-50%); /* 向左移动自己宽度的50%，向上移动自己高度的50% */
}

4、flex

注：这种方式是将父元素设置为flex，通过justify-content: center;来设置水平居中，align-items: center; 设置垂直居中。在这种情况下，子元素可指定高宽，未指定则为元素内容大小。

代码示例:

/* HTML */
<div class="container">
    <div class="box">我是使用flex实现居中的</div>
</div>

/* CSS */
.container{
    height: 200px;
    background-color: #F9E79F;

    display: flex; /* 将元素设置为弹性盒子 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

.box{
    background-color: #ABEBC6;
}