我有<div>一个句子。的高度<div>基于% （其高度可变-取决于屏幕的大小）。现在，我想将该句子保持在的中心（垂直）<div>，我该怎么做？
这是我说的一个例子：
div{
position:absolute;
border: 1px solid;
width: 250px;
height: 60%;
text-align: center;
}<div>This should be center vertically</div>我最喜欢的技术是向::after父元素添加一个伪元素，将所有元素的子元素包装在一个元素中，然后让该元素和::after伪元素玩内联块，垂直对齐游戏：
div{
position:absolute;
border: 1px solid;
width: 250px;
height: 60%;
text-align: center;
}
div span {
display: inline-block;
vertical-align: middle;
}
div::after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}<div><span>This should be centered vertically, and now it is!</span></div>::after具有的伪元素height: 100%将随着父元素的高度动态扩展，因此内部元素将始终垂直居中。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句