css - CSS垂直居中图片和文字

例如，我被编写为该源代码，例如，我手动为h2标签输入padding-top 90px，例如我想要的；但是，当删除填充文本时，它们不会垂直居中。当我知道bluebox div的高度，但有时是200px，有时是900px时，这不是问题。

.bluebox
{
width: 400px;
background-color: blue;
height: 200px;
}

.bluebox h2
{
font-family: Arial;
font-size: 10pt;
text-align: center;
padding-top: 90px;
}

<div class="bluebox"><h2>Hi i am a text, now I am only horizontal centered<h2></div>

演示：http://jsfiddle.net/5UJWa/

最佳答案

.bluebox {
    width: 400px;
    background-color: blue;
    height: 200px;
    position: relative; /* allow absolute positioning within */
}

.bluebox h2 {
    font-family: Arial;
    font-size: 10pt;
    text-align: center;
    position: absolute; /* positioning */
    top: 50%; /* 50% from the top (half way) */
    margin-top: -5pt; /* bring it back up half the height of your text size */
    width: 100%; /* to allow for the text align */
}

http://jsfiddle.net/zTPgh/1/处的示例-更改容器的高度，然后运行或更新以查看其运行情况。

关于css - CSS垂直居中图片和文字，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17558592/

blueBox

css - CSS垂直居中图片和文字