# 元素居中

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

1
2
3

# 一、水平垂直居中

# 居中元素定宽高

1、absolute + 负margin值

父元素设置相对定位，子元素设置绝对定位，margin值设置为负数。

注意：子元素需要定宽高。

.parent {
    /*核心代码*/
    position: relative;
    
    height: 200px;
    width: 200px;
    border: 1px solid #f00;
}

.child {
    /*核心代码*/
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;

    width: 100px;
    height: 100px;
    background: #f00;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2、absolute + margin:auto

父元素设置相对定位，子元素设置绝对定位，margin值设置auto，四个方向设置为0。

注意：子元素需要定宽高。

.parent {
    /*核心代码*/
    position: relative;
    
    height: 200px;
    width: 200px;
    border: 1px solid #f00;
}

.child {
    /*核心代码*/
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    
    width: 100px;
    height: 100px;
    background: #f00;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

理解margin:auto:

如果一侧定值，一侧auto，则auto为剩余空间大小。如果两侧都是auto，则平分剩余空间（居中）。为何图片设置margin：0 auto不居中？因为图片是行内元素，不会占据整个容器。因此元素一定要占据整个容器。而top:0;left:0;right: 0;bottom: 0;的作用就是强行占据整个容器。注意：即使块状元素设置了width和height，依旧是占满一行的，因为它是块状元素。

3、 absolute + calc

父元素设置为相对定位，子元素设置绝对定位，使用calc。

注意：子元素需要定宽高。

.parent {
    /*核心代码*/
    position: relative;

    height: 200px;
    width: 200px;
    border: 1px solid #f00;
}

.child {
    /*核心代码*/
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);

    width: 100px;
    height: 100px;
    background: #f00;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 居中元素不定宽高

1、absolute + transform

父元素设置为相对定位，子元素设置绝对定位，使用transform。

注意：子元素不需要定宽高。

.parent {
    /*核心代码*/
    position: relative;

    height: 200px;
    width: 200px;
    border: 1px solid #f00;
}

.child {
    /*核心代码*/
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    background: #f00;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2、flex布局

子元素可以不用设置宽高。

.parent {
    /*核心代码*/
    display: flex;
    justify-content: center;
    align-items: center;

    width: 200px;
    height: 200px;
    border: 1px solid #f00;
}

.child {
    background: #f00;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

3、grid布局

子元素可以不用设置宽高。

.parent {
    /*核心代码*/
    display: grid;

    width: 200px;
    height: 200px;
    border: 1px solid #f00;
}

.child {
    /*核心代码*/
    align-self: center;
    justify-self: center;
    
    background: #f00;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4、writing-mode

使用writing-mode垂直水平居中，子元素不需要定宽高。

.parent {
    /*核心代码*/
    writing-mode: vertical-lr;
    text-align: center;

    height: 200px;
    width: 200px;
    border: 1px solid #f00;
}

.child {
    /*核心代码*/
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

5、line-height

父元素定好宽高，使用line-height垂直对齐，再使用text-align水平对齐。子元素可以不设置宽高。

.parent {
    /*核心代码*/
    width: 200px;
    line-height: 200px;
    text-align: center;
    
    border: 1px solid #f00;
}

1
2
3
4
5
6
7
8

6、tabel-cell

父元素设置table-cell，子元素可以不用设置宽高。

.parent {
    /*核心代码*/
    display: table-cell;
    text-align: center;
    vertical-align: middle;

    width: 200px;
    height: 200px;
    border: 1px solid #f00;
}

.child {
    /*核心代码*/
    display: inline-block;

    background: #f00;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 二、仅水平居中

1、行内元素: text-align: center

2、块级元素: margin: 0 auto

3、子元素设置display:table+margin: 0 auto

.parent {
    height: 200px;
    width: 200px;
    border: 1px solid #f00;
}

.child {
    /*核心代码*/
    display: table;
    margin: 0 auto;
}

1
2
3
4
5
6
7
8
9
10
11

4、flex + margin：0 auto

.parent {
    /*核心代码*/
    display: flex;

    height: 200px;
    width: 200px;
    border: 1px solid #f00;
}

.child {
    /*核心代码*/
    margin: 0 auto;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

5、相对于元素水平垂直都居中的实现，flex 或者 grid 只取水平居中的部分，不取垂直居中的部分

# 三、仅垂直居中

line-height: height
absolute + transform
flex + align-items: center
table

参考：学习CSS布局

参考：CSS实现水平垂直居中的1010种方式

← 层叠上下文 CSS的特殊性和优先级 →