真正的垂直和水平居中CSS Div
14
- Jess McKenzie
4
为什么“margin: 0 auto”不够好？ - user229044
@meagar：那只是水平居中，不是垂直居中。 - icktoofay
啊，问题应该表明意图是垂直居中元素。 - user229044
@meagar 那只适用于水平的，我也需要垂直的。 - Jess McKenzie
8个回答
11
这种技术要求元素具有固定的宽度和高度，但你没有设置宽度和高度。根据边框和外边距，在保持文本和边框居中的情况下，宽度应为190像素，高度应为90像素。使用line-height和text-align与固定的宽度和高度相结合，可以使文本和边框居中显示。点此试一下。
CSS
.center{
position: fixed;
top: 50%;
left: 50%;
width: 190px;
height: 90px;
line-height: 90px;
text-align: center;
margin-top: -50px;
margin-left: -100px;
border:5px solid black;
}
- icktoofay
10
您可以使用纯 CSS 来实现此目标：
html {
width: 100%;
height: 100%;
}
body {
min-width: 100%;
min-height: 100%;
}
div.centeredBlueBox {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 300px;
height: 200px;
background-color: blue;
}
为 width 和 height 指定具体值（例如：300px），而不是派生值（如：auto 或 30%）是很重要的。
- Gixx Man
1
我认为这是最好的解决方案。它仍然可以在调整内容大小时工作，而无需重新计算其他尺寸。 - BananaAcid
3
<div style='position:absolute; left:50%; top:50%; margin-left:(-)width_of_your_element/2px; margin-top:(-)height_of_your_element/2px'>
例如
<!DOCTYPE html>
<html>
<body>
<div style='border:1px solid; width:200px; height:200px; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px'>hallo</div>
</body>
</html>
- derWilly
2
这是一个我为IE垂直对齐创建的高度设置器示例。额外的span具有vertical-align: middle。
<style type="text/css">
html, body {
margin: 0;
padding: 0;
overflow:hidden;
text-align:center;
}
html, body{
height: 100%;
}
#loginContainer {
margin: 0 auto;
display: table;
min-width:300px;
text-align:left;
height: 85%; /* vertical align not exact in the middle */
}
#loginContainer .label{
width: 25%;
float:left;
white-space:nowrap;
line-height:20px;
}
#loginContainer h2{
border-bottom:2px solid #B4C3E1;
border-width:0 0 3px;
padding:2px 4px;
}
.mainHeader {
position:absolute;
top:0;
left:0;
text-align:center;
width:100%;
font-size:2em;
white-space:nowrap;
}
.detailsText {
border-top:1px solid #F60;
margin-top:5px;
clear:both;
}
/* layout horizontal and vertical */
.horizontalBox {
display: table-cell;
vertical-align: middle; /* not seen by IE6-7 */
height: 100%;
white-space: nowrap;
}
.verticalBox {
padding: 55px 0 0 0; /* 55px height of logo */
}
.rightText {
text-align:right;
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
#loginContainer {
width:300px; /* minimum width */
}
.horizontalBox {
text-align: center;
}
.verticalBox, .heightSetter {
display: inline-block;
vertical-align: middle;
text-align: left;
zoom:1;
}
.heightSetter {
height: 100%;
}
.verticalBox {
display: inline;
height: 0;
}
.heightSetter {
width: 1px;
}
</style>
<![endif]-->
<div class="mainHeader">This is the Header content</div>
<div id="loginContainer">
<div class="horizontalBox">
<div class="verticalBox">
<h2>My header of the vertical box</h2>
<p>My Content</p>
</div>
<span class="heightSetter"></span>
</div>
</div>
- Ron Jonk
2
这是我的解决方案：
<div style="position: absolute; left: 50%; height: 100%;">
<div style="position: relative; left: -50%; display: table; height: 100%;">
<div style="display: table-cell; vertical-align: middle;">
//your content here
</div>
</div>
</div>
它可以在很多浏览器中使用。并且在布局后添加内容也没有问题。
- AKonst
2
将
DIV 标签的 display 属性设置为 table-cell，就可以像 TD 元素一样使用普通的 vertical-align 属性。<div style="display: table-cell; vertical-align: middle; height: 200px;">
Centered Text
</div>
- kpruner
1
这是我所做的
<html>
<head>
<title>Page Title</title>
<style>
.center { margin:auto; width:500px; background-color:green; }
</style>
</head>
<body>
<div class="center">
<p>Help me please</p>
</div>
</body>
</html>
希望这能有所帮助。
- Frankie Law
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接