css实现垂直居中

css实现垂直居中一般使用绝对定位和负边距,随着css3的发布,使居中方式更加多样化。

html文档结果如下:

1
2
3
<div class="box box-align">
<span>我是居中文字</span>
</div>

实现的效果图如下:

使用绝对定位

结合负边距

利用 position: absolute 设置绝对定位和 marigin 设置长宽的一半负边距。

css样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.box{
height: 300px;
background-color: #369;
color: #fff;
}
.box>span {
background-color: #933;
}
.box-align {
position: relative;
}
.box-align span {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -100px;
}

使用translate

可以不用设置负边距移动,利用css3的 transform 来做空间移动。

1
2
3
4
5
6
7
8
.box-align span {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

使用auto边距

设置 margin: auto 和绝对定位四边为0,很神奇的效果~

css样式:

1
2
3
4
5
6
7
8
9
10
.box-align span {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 50px;
width: 100px;
margin: auto;
}

使用flex

容器设置成 flex 布局, 主轴和交叉轴的对齐方式都设置成 center

1
2
3
4
5
.box-align {
display: flex;
justify-content: center;
align-items: center;
}

另外可以不设置轴对齐,直接设置 margin: auto 实现对齐。

1
2
3
4
5
6
7
8
9
10
.box-align {
display: flex;
text-align: center;
}

.box-align span {
width: 100px;
height: 50px;
margin: auto;
}

利用inline-block

可以让 <span> 和一个伪元素 ::after 都设置成内联块,设置水平和垂直对齐。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.box-align {
text-align: center;
}
.box-align span {
vertical-align: middle;
display: inline-block;
width: 100px;
height: 50px;
}
/* 利用伪元素来占位对齐 */
.box-align::after {
display: inline-block;
content: '';
width: 0;
height: 100%;
vertical-align: middle;
}

利用table-cell

对容器利用 display: table-cell 设置成表格单元格布局,然后设置对齐方式。缺点就是要确定容器的宽度。

1
2
3
4
5
6
7
8
9
10
11
.box-align {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 700px; /* 这里用百分比设置宽度无效 */
}
.box-align span {
display: inline-block;
width: 100px;
height: 50px;
}

利用 -webkit-box

-webkit-box 为灵活的弹性盒子布局,类似于 flex 布局,但是兼容性远不如后者,只有chrome的支持好点,firefox到现在还不支持。

其中有几个比较常见的属性:

  • -webkit-box-orient : 定义主轴方向
  • -webkit-box-pack: 定义在主轴上的对齐方式
  • -webkit-box-align: 定义在交叉轴上的对齐方式
1
2
3
4
5
6
7
8
9
10
11
.box-align {
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
}
.box-align span {
display: inline-block;
width: 100px;
height: 50px;
}