Zhe Yang

不固定高宽div垂直居中的方法

用一个“ghost”伪元素(看不见的伪元素)和 inline-block / vertical-align 可以搞定居中,非常巧妙。但是这个方法要求待居中的元素是 inline-block,不是一个真正通用的方案。

html如下:

1
2
3
4
5
6
7
8
<div class="block" style="height: 300px;">

<div class="centered">
<h1>案例题目</h1>
<p>案例内容</p>
</div>

</div>

css如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* This parent can be any width and height */
.block {
text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 50%;
}
码字很辛苦,转载请注明来自Zhe Yang – Shandong University《不固定高宽div垂直居中的方法》

评论