如何垂直对齐到定义了宽/高的div内容的中心？
如何垂直对齐到定义了宽/高的div内容的中心？
提问于 2012-06-10 20:33:04
在定义的宽度/高度div中垂直居中任何内容的正确方法是什么？
在example中有两个高度不同的内容，使用.content类将两个内容垂直居中的最佳方式是什么？(它适用于每种浏览器，没有table-cell的解决方案)
在脑海中有一些解决方案，但想知道其他想法，一个是使用position:absolute; top:0; bottom: 0;和margin auto。
回答 5
Stack Overflow用户
发布于 2017-12-28 21:41:11
这也可以使用只需几行代码的display: flex来完成。下面是一个示例：
.container {
width: 100px;
height: 100px;
display: flex;
align-items: center;
}Stack Overflow用户
发布于 2016-06-27 05:40:25
我在这个article中找到了这个解决方案
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}如果元素的高度不固定，它就像一个护身符。
Stack Overflow用户
发布于 2020-10-13 04:51:28
垂直居中div内容的简单技巧是将行的高度设置为与height相同：
<div>this is some line of text!</div>
div {
width: 400px
height: 50px;
line-height: 50px;
}但这只适用于一行文本！
最好的方法是使用div作为容器，并在其中包含值的span：
.cont {
width: 100px;
height: 30px;
display: table;
}
.val {
display: table-cell;
vertical-align: middle;
}
<div class="cont">
<span class="val">CZECH REPUBLIC, 24532 PRAGUE, Sesame Street 123</span>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10968726
复制相关文章
相似问题