学习笔记

孜孜不倦，蒸蒸日上

0%

几种垂直居中的方法

发表于 分类于 阅读次数： Valine：

垂直居中主要分为了两种类型：居中元素宽高已知 和 居中元素宽高未知

01

以下的方法都围绕着该HTML展开

1
2
3
<div  class="wrap">
    <div  class="box">123</div>
</div>

一、居中元素宽高元素未知

1、（常用）：display：flex （①）

1
2
3
4
5
6
7
8
9
10
11
12
13
.wrap{
	width:300px;
	height:300px;
    border: 1px solid red;
    /* 核心代码 */
    display:flex;
    justify-content:center;
    align-items:center;
}

.box{//子元素宽高可设可不设

}

2、常用）：display：flex + margin auto（②）

1
2
3
4
5
6
7
8
9
10
11
12
.wrap{
	width:300px;
	height:300px;
    border: 1px solid red;
    /* 核心代码 */
    display:flex;
}

.box{//子元素宽高可设可不设
    /* 核心代码 */
    margin: auto;
}

3、absolute + transform

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.wrap {
    width: 300px;
    height: 300px;
    position: relative;
    background-color: plum;
}

.box {//子元素宽高可设可不设
    /* 核心代码 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

4、table-cell

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.wrap{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    /* 核心代码 */
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.box{ //在子元素里加上display: inline-block;
    /* 核心代码 */
    display: inline-block;
}

5、line-height + inline-block + vertical-aligin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//把当前元素设置为行内元素，然后通过设置父元素的 text-align: center; 实现水平居中；

//同时通过设置当前元素的 vertical-align: middle; 来实现垂直居中；

//最后设置当前元素的 line-height: initial; 来继承父元素的line-height。
.wrap {
    width: 300px;
    height: 300px;
    background-color: pink;
    /* 核心代码 */
    text-align: center;
    line-height: 300px;
}

.box {
    /* 核心代码 */
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
}

6、grid 网格布局（①） CSS Grid 网格布局教程

1
2
3
4
5
6
7
8
9
10
11
12
13
.wrap {
    width: 300px;
    height: 300px;
    background-color: plum;
    /* 核心代码 */
    display: grid;
    align-items: center;
    justify-content: center;
    
}
.box {//子元素宽高可设可不设
    
}

7、grid 网格布局（②）

1
2
3
4
5
6
7
8
9
10
11
12
.wrap {
    width: 300px;
    height: 300px;
    background-color: plum;
    /* 核心代码 */
    display: grid;
}
.box {//子元素宽高可设可不设
    /* 核心代码 */
    align-self: center;
    justify-self: center;
}

二、居中元素宽高元素已知

1、absolute + margin:auto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.wrap{
    width: 300px;
    height: 300px;
    position: relative;
    background-color: plum;
}

.box{//子元素设置宽高
    width: 100px;
    height: 100px;
    background-color: powderblue;
    /* 核心代码 */
    position: absolute;
    left: 0;
    top: 0;
    bottom:0;
    right:0;
    margin:auto; 
}

2、absolute + 负margin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.wrap{
    width: 300px;
    height: 300px;
    position: relative;
    background-color: plum;
}

.box{//子元素设置宽高
    width: 100px;
    height: 100px;
    background-color: powderblue;
    /* 核心代码 */
    position: absolute;
    left: 50%;
    top: 50%;
    /*宽高的一半*/
    margin-left: -50px;
    margin-top: -50px; 
}

3、absolute + calc, 用CSS3的一个计算函数来进行计算，方法与上面类似

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.wrap{
    width: 300px;
    height: 300px;
    position: relative;
    background-color: plum;
}

.box{//子元素设置宽高
    width: 100px;
    height: 100px;
    background-color: powderblue;
    /* 核心代码 */
    position: absolute;
    /*减掉宽高的一半，calc()减号前后要有空格*/
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

4、margin，transform配合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.wrap{
    width: 300px;
    height: 300px;
    background-color: pink;
    /* 核心代码 */
    /*防止外边距塌陷。解决外边距塌陷的方法：
    父元素加overflow:hidden或加上边框*/
    overflow: hidden;
}
.box{ //子元素设置宽高
    width: 100px;
    height: 100px;
    background-color: plum;
    /* 核心代码 */
    margin:50% auto;
    transform: translateY(-50%); 
}

其实以上的是一种垂直居中方法，只是比较常见的，其实还有一些比较冷门的方式方法，例如 伪类元素、grid-container 的 grid-template-rows 等，大家下去可以自行尝试一下 ~

------ The End ------
您的认可是我不断进步的动力！