如何在动态高度div中垂直居中放置文本？

  • Z时代
  • 2024-01-10
  • 分类：问答

Text

无论div元素有多高，我如何在h1标签内垂直居中放置h1标签？即如果用户更改他的浏览器高度，我希望h1根据新的高度在中心垂直对齐。

谢谢。

回答：

我遇到过的最好的解决方案是利用display属性并将wrapper元素设置为，table以允许vertical-

align:middle对元素的使用居中：

<body>
    <div>
        <h1>Text</h1>
    </div>
</body>

body {width: 100%; height: 100%;}   /* this is just to "view" the div height...*/
div {
    position:absolute; height:100%; width:100%;
    display: table;
}
h1 {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

经过测试

  • Internet Explorer 8.0.6001.18702

  • 歌剧11.62

  • Firefox 3.6.16

  • Safari 5.1.2

  • 谷歌浏览器18.0.1025.168 m

  • Internet Explorer 9.0.8112.164211C

  • 歌剧11.62

  • Firefox 12.0

  • Safari 5.1.4

  • 谷歌浏览器18.0.1025.168 m

  • Firefox 12.0

  • Chromium 18.0.1025.151（Developer Build 130497 Linux）

以上是 如何在动态高度div中垂直居中放置文本？ 的全部内容， 来源链接： utcz.com/qa/422786.html

回到顶部