我有一个宽度固定且居中的容器。在容器内部，我有两个相对于窗口并排放置的 DIV。在这些 Div 中，我还有其他我想要居中的内容(最好使用容器)。
这里是简化代码:http://jsfiddle.net/jTpGs/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
#container {
width: 960px;
height: 1000px;
background: red;
margin: 0 auto;
}
#windowdiv {
height: 200px;
background: purple;
padding-top: 20px;
position: absolute;
left: 0;
right: 30%;
top: 25px;
}
#windowdiv2 {
height: 200px;
background: blue;
padding-top: 20px;
position: absolute;
left: 60%;
right: 0;
top: 10px;
}
</style>
</head>
<body>
<div id='container'>
<div id='windowdiv'>
<p>some content</p>
</div>
<div id='windowdiv2'>
<p>some content</p>
</div>
</div>
</body>
</html>
最佳答案
将此添加到您的 CSS 中，使您的文本在这些框的中间居中:
#windowdiv p, #windowdiv2 p {
text-align: center;
height: 100%;
line-height: 180px;
}
这是假设你的盒子是固定高度的，因为我们设置了行高。 (200px - 20px (padding-top) = 180px)
关于html - 保持绝对定位的 DIV 内的内容居中(在父容器内)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13944575/