Zhe Yang

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

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

html如下:

案例题目

案例内容

css如下:

/* 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垂直居中的方法》

评论

友情链接:张小丽的博客