gpt4 book ai didi

html - 在页面中间水平和垂直居中div

转载 作者:太空宇宙 更新时间:2023-11-04 14:45:35 25 4
gpt4 key购买 nike

我正在尝试获得如下所示的页面布局 Horizontally and vertically center div in the middle of page with header and footer stuck to top and bottom of page

这在除 ie6 和 ie7 之外的所有浏览器中都适用。

谁能帮我解决这个问题?我是一名服务器端开发人员,并且是前端新手。我做了一些搜索,但找不到解决方案。

提前感谢您的帮助。

最佳答案

使用 CSS 垂直居中可能会很痛苦。查看Dead Centre .它需要一个额外的容器“地平线”来知道垂直中心在哪里,不幸的是,您必须知道您想要居中的内容的尺寸,以便您可以偏移它。

像这样...

body {
margin: 0px
}

#horizon {
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}

#content {
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
visibility: visible
}
<body>
<div id="horizon">
<div id="content">
content you want centered
</div>
</div>
</body>

关于html - 在页面中间水平和垂直居中div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8679755/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com