元素垂直居中

发表于 | 分类于 ，

一.单行文字

1.Line-height

line-height:height的高度

二.多对象

1.Line-height + inline-block

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
css:
.ex2{
    width: 500px;
    border: 1px solid #f00;
    line-height: 400px;//跟height相同
    height: 400px;//定高
}
.ex2 .content{
    display: inline-block;
    line-height: 1;若是不设置的话将会继承父元素的400px
    background: #ccc;
    vertical-align: middle;
}
html:
<div class="ex2">
    <div class="content">
        原阳县委作出决定，对在盛和府建筑工地“4·18”压埋窒息事故中负有监管责……
    </div>
</div>

2.:before + inline-block

其实伪元素在此处的作用就是为了改变（或者叫重新定义）父元素baseline的位置
缺点：需要特别处理掉inline-block元素之间的4-5px空间这个小缺陷，但也很实用了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
css：
.ex3 {
    width: 500px;
    height: 250px;
    border: 1px solid #f00;
}
.ex3::before {
    content: '';
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}
.ex3 .content {
    width: 400px;如果处理inline-block了的空白，最大值可以是500px
    background: #ccc;
    display: inline-block;
    vertical-align: middle;
}

html:同二.1

3.absolute + top50% + margin 负值

绝对定位在这个例子中会设置top:50%来抓取空间高度的50%，接着在将居中元素的margin-top设定为负一半的高度，这样就能让元素居中了。

缺点：需要知道垂直居中元素的宽和高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
css:
.ex4 {
    width: 500px;
    height: 250px;
    border: 1px solid #f00;
    position: relative;
}
.ex4 .content {
    background: #ccc;
    height: 100px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
}

html:同二.1

4.absolute + top0 bottom0 + margin auto

当元素设置为绝对定位后，假设它是抓不到整体可运用的空间范围，所以margin:auto会失效，但当你设置了top:0;bottom:0;时，绝对定位元素就抓到了可运用的空间了，这时你的margin:auto就生效了（神奇吧），如果你的绝对定位元素需要水平居中于父层，那你同样可以设定left:0;right:0;来让绝对定位元素取得空间可运用范围，再让marign-left与margin-right设定为auto即可居中。

缺点:是你的定位元素必须有固定的宽高（百分比也算）才能正常居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
css:
.ex5{
	width: 500px;
	height: 250px;
	border: 1px solid #f00;
	position: relative;
}
.ex5 .content{
	background: #ccc;
	height: 100px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}

html:同二.1

5.absolute + top50% + translatey-50%

在一个绝对定位居中的方式，此方式应该算是最方便的了，因为此居中的定位元素不需要固定的宽高，我们利用绝对定位时的top 与right设置元素的上方跟左方各为50%，再利用translate(-50%,-50%)位移居中元素自身宽与高的50%就能达成居中的目的了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
css:
.ex6{
	width: 500px;
	height: 250px;
	border: 1px solid #f00;
	position: relative;
}
.ex6 .content{
	background: #ccc;
	position: absolute;
	top:50%;
	transform: translatey(-50%);
}

html:同二.1

6.Flex + align-items:center

1
2
3
4
5
6
7
8
9
10
11
12
.ex7{
	width: 500px;
	height: 250px;
	border: 1px solid #f00;
	display: flex;
	align-items: center; //属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式
}
.ex7 .content{
	background: #ccc;
}

html:同二.1

7.Flex + align-self:center

1
2
3
4
5
6
7
8
9
10
11
12
.ex8{
	width: 500px;
	height: 250px;
	border: 1px solid #f00;
	display: flex;
}
.ex8 .content{
	background: #ccc;
	align-self: center;//属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
}

html:同二.1

8.Flex + margin:auto

由于Flex元素对空间解读的特殊性，我们只要在父层元素设定display:flex，接着在需要垂直居中的元素上设定margin:auto，即可自动居中

1
2
3
4
5
6
7
8
9
10
11
12
13
css：
.ex9{
	width: 500px;
	height: 250px;
	border: 1px solid #f00;
	display: flex;
}
.ex9 .content{
	background: #ccc;
	margin: auto;
}

html:同二.1

9.Display：table-cell + vertical-align: middle

这一招的原理在于使用 CSS display属性将div设置成表格的单元格，这样就能利用支持存储单元格对齐的vertical-align属性来将信息垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
css:
.ex10{
	width: 500px;
	height: 250px;
	border: 1px solid #f00;
	display: table-cell;
	vertical-align: middle;
}

html:
<div class="ex10">
    原阳县委作出决定，对在盛和府建筑工地“4·18”压埋窒息事故中负有监管责任的县……
</div>

参考：http://csscoke.com/2018/08/21/css-vertical-align/