gpt4 book ai didi

css - 垂直对齐 block

转载 作者:太空宇宙 更新时间:2023-11-03 21:01:16 26 4
gpt4 key购买 nike

到底如何让 div 垂直居中?

水平居中的方法已经够多了,但无论我怎么尝试,垂直居中都是不可能的。

body { vertical-align: middle;}

什么都不做

body {text-align: middle;}

什么都不做

div.middle {top: 50%;}

什么都不做

有可能吗?

我想我要哭了。

最佳答案

参见 Vertical Centering in CSS .

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to ser it */
</style>
</head>

<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>

关于css - 垂直对齐 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1896229/

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