gpt4 book ai didi

html - 垂直居中页面内容

转载 作者:太空狗 更新时间:2023-10-29 14:42:23 25 4
gpt4 key购买 nike

我知道如何使用 CSS 将整个页面水平居中。但是有没有办法让页面垂直居中呢?像这样的……


Example


最佳答案

为此,您还可以劫持 CSS 的 display: tabledisplay: table-cell。 HTML 将是这样的:

<body>
<div id="body">
<!-- Content goes here -->
</div>
</body>

还有 CSS:

html,
body {
width: 100%;
height: 100%;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}

如果你也想要水平居中,那么添加这个:

#body {
max-width: 1000px; /* Or whatever makes sense for you. */
margin: 0 auto;
}

有些人会称这是对 CSS 的滥用,但是:

  • 它在任何地方都几乎完全相同。
  • 需要最少的标记和样式。
  • 而且 CSS 的垂直对齐值得一些滥用;垂直对齐不应该像它那样需要修改、扭曲和绝对大小。

引用资料:

关于html - 垂直居中页面内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5282758/

25 4 0
文章推荐: android - Kotlin 协程不等待完成
文章推荐: javascript - jquery 在
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com