参见英文答案 >
How to center an element horizontally and vertically?13个
我有一个背景图像的div需要水平和垂直居中.在该图像的顶部,我还想显示1行文本,也是水平和垂直居中.
我有一个背景图像的div需要水平和垂直居中.在该图像的顶部,我还想显示1行文本,也是水平和垂直居中.
我设法使图像居中,但文本不是垂直居中.我认为vertical-align：middle会做到这一点.
这是我的代码：
<div style="background: url('background.png') no-repeat center; width:100%; height:100%; text-align:center;">
<div style="color:#ffffff; text-align: center; vertical-align:middle;" >
Some text here.
</div>
</div>
有任何想法吗？
解决方法：我实际上通过使用表来实现这一点. (我可能会被HTML社区诅咒地狱.)有没有重要的理由不使用这个btw？我仍然对使用div的解决方案感兴趣.
<table width="100%" height="100%">
<tr>
<td align="center" style="background: url('background.png') no-repeat center; color:#ffffff;">Some text here.</td>
</tr>
</table>
解决方法
传统上以这种方式完成块元素的水平居中：
div.inner { margin: 0 auto; }
注意：上述内容不适用于怪癖模式下的IE,因此请始终将DOCTYPE放在文档的顶部,以强制它进入符合标准的模式.
垂直定心更加繁琐.见Vertical Centering in CSS
