一、水平居中

1. 行内元素水平居中

利用 text-align:center 可以实现在块级元素内部的行内元素水平居中。（当然，如果子元素不是行内元素，可以将其转换为行内元素）

1
2
3
4
5
6
7
8
9
10
11
<div class="parent">
    <div class="child">Demo</div>
</div>
<style>
.parent{
    text-align: center;
}
.child {
    display: inline-block;
}
</style>

2. 块级元素的水平居中

（1）将该块级元素左右外边距margin-left + margin-right设置为auto（定宽）

1
2
3
4
5
6
7
8
9
<div class="parent">
    <div class="child">Demo</div>
</div>
<style>
.child {
    width: 100px; // 确保该块级元素定宽
    margin: 0 auto;
}
</style>

（2）使用table + margin（不定宽）

display:table 在表现上类似block元素，但是宽度为内容宽

1
2
3
4
5
6
7
8
9
<div class="parent">
    <div class="child">Demo</div>
</div>
<style>
.child {
    display: table;
    margin: 0 auto;
}
</style>

（3）使用absolute + transform

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="parent">
    <div class="child">Demo</div>
</div>
<style>
.child {
    position:absolute;
    left: 50%;
    transform: translateX(-50%); // 向左移动子元素一半宽度
}
.parent {
    position:relative;
}
</style>

（4）使用flex + justify-content

1
2
3
4
5
6
7
8
9
<div class="parent">
    <div class="child">Demo</div>
</div>
<style>
.parent {
    display: flex;
    justify-content: center;
}
</style>

（5）使用flex + margin

1
2
3
4
5
6
7
8
9
10
11
<div class="parent">
    <div class="child">Demo</div>
</div>
<style>
.parent {
    display: flex; // 将父容器设置为flex布局
}
.child {
    margin:0 auto; // 设置子元素居中
}
</style>

3. 多块级元素水平居中

（1）flex布局

1
2
3
4
#container {
    display: flex;
    justify-content: center;
}

（2）inline-block

将要水平排列的块状元素设为display: inline-block，然后在父级元素上设置text-align:center

1
2
3
4
5
6
.container {
    text-align: center;
}
.inline-block {
    display: inline-block;
}

4. 浮动元素的水平居中

对于定宽的浮动元素，通过子元素设置relative + 负margin；

对于不定宽的浮动元素，父子容器都用相对定位；

通用方法(不管是定宽还是不定宽)：flex布局；

（1）定宽的浮动元素

面试题问道就答这种就行，下面的作为了解

1
2
3
4
5
6
7
8
9
10
11
.child {
    width: 500px;
    position: absolute; // 父元素需要相对定位
    left: 50%;
    margin-left: -250px; // 自身一半的width
}
<div class="parent">
    <span class="child" style="float: left;">
        我是要居中的浮动元素
    </span>
</div>

（2）不定宽的浮动元素

注意：要给父元素添加float来清除浮动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="box">
    <p>我是浮动的</p>
    <p>我也是居中的</p>
</div>
.box {
    float:left;
    position:relative;
    left:50%; // 盒子相对页面左移50%
}
p {
    float:left;
    position:relative;
    right:50%; // 子元素相对盒子右移50%
}

（3）通过flex实现浮动元素（无论定宽还是不定宽的居中）

1
2
3
4
5
6
7
8
9
10
11
12
13
.parent {
    display:flex;
    justify-content:center;
}
.chlid{
    float: left;
    width: 200px;//有无宽度不影响居中
}
<div class="parent">
    <span class="chlid">
        我是要居中的浮动元素
    </span>
</div>

5. 绝对定位元素的水平居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="parent">
    <div class="child">
        让绝对定位的元素水平居中对齐。
    </div>
</div>
.parent{
    position:relative;
}
.child{
    position: absolute; /*绝对定位*/
    width: 200px;
    height:100px;
    background: yellow;
    margin: 0 auto; /*水平居中*/
    left: 0; /*此处不能省略，且为0*/
    right: 0;/*此处不能省略，且为0*/
}

二、垂直居中

1. 单行内联元素垂直居中：line-height

1
2
3
4
5
6
7
8
9
10
<div id="box">
    <span>单行内联元素垂直居中。</span>。
</div>
<style>
#box {
    height: 120px;
    line-height: 120px;
    border: 2px dashed #f69c55;
}
</style>

2. 多行内联元素垂直居中

（1）flex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="parent">
    <p>
        Dance like nobody is watching, code like everybody is.
        Dance like nobody is watching, code like everybody is.
        Dance like nobody is watching, code like everybody is.
    </p>
</div>
<style>
.parent {
    height: 140px;
    display: flex;
    flex-direction: column; // 定义主轴方向为纵向
    justify-content: center; // 居中主轴子元素
    border: 2px dashed #f69c55;
}
</style>

（2）table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="parent">
    <p class="child">
        The more technology you learn, the more you realize how little you know.
        The more technology you learn, the more you realize how little you know.
        The more technology you learn, the more you realize how little you know.
    </p>
</div>
<style>
.parent {
    display: table;
    height: 140px;
    border: 2px dashed #f69c55;
}
.child {
    display: table-cell;
    vertical-align: middle;
}
</style>

3. 块级元素垂直居中

（1）absolute + margin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="parent">
    <div class="child">
        固定高度的块级元素垂直居中。
    </div>
</div>
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px;
}

（2）absolute + transfrom

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="parent">
    <div class="child">
        未知高度的块级元素垂直居中。
    </div>
</div>
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

（3）flex + align-items

1
2
3
4
5
6
7
8
9
<div class="parent">
    <div class="child">
        未知高度的块级元素垂直居中。
    </div>
</div>
.parent {
    display:flex;
    align-items:center;
}

（4）table-cell + vertical-align

1
2
3
4
5
6
7
8
9
<div class="parent">
    <div class="child">Demo</div>
</div>
<style>
.parent {
    display: table-cell;
    vertical-align: middle;
}
</style>

三、水平垂直居中（面试常考）

1. 绝对定位与负边距（已知宽高）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id='container'>
    <div id='center'
        style="width: 100px;height: 100px;background-color: #666">center
    </div>
</div>
#container {
    position: relative;
}
#center {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
}

2. 绝对定位与margin:auto（未知子元素宽高）

1
2
3
4
5
6
7
8
9
10
11
12
#container {
    position: relative;
    height:100px;//必须有个高度
}
#center {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;//注意此处的写法
}

3. 绝对定位 + transform（未知宽高）

1
2
3
4
5
6
7
8
9
#container {
    position: relative;
}
#center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

4. flex

1
2
3
4
5
6
#container {//直接在父容器设置即可
    height: 100vh;//必须有高度
    display: flex;
    justify-content: center;
    align-items: center;
}

5. grid（最简单的写法）

1
2
3
4
5
6
7
#container {
    height: 100vh;//必须有高度
    display: grid;
}
#center {
    margin: auto;
}