参见英文答案 >
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
