我有一个div标签,宽度设置为800像素。当浏览器宽度大于800像素时,它不应该拉伸div,但应该将它带到页面的中间。
当前回答
body, html {
display: table;
height: 100%;
width: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
.container .box {
width: 100px;
height: 100px;
background: red;
margin: 0 auto;
}
http://jsfiddle.net/NPV2E/
“body”标签的“width:100%”仅为示例。在实际项目中,您可以删除此属性。
其他回答
如果你的中心内容深在其他div,那么只有边缘可以拯救你。什么都没有。当我不使用Bootstrap这样的框架时,我总是面临这个问题。
只需在body标签之后使用center标签,并在body结束之前结束center标签:
<body>
<center>
... Your code here ...
</center>
</body>
在我尝试过的所有浏览器中,这都是可行的。
body, html {
display: table;
height: 100%;
width: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
.container .box {
width: 100px;
height: 100px;
background: red;
margin: 0 auto;
}
http://jsfiddle.net/NPV2E/
“body”标签的“width:100%”仅为示例。在实际项目中,您可以删除此属性。
旧代码中其他一些预先存在的设置将阻止div页面居中L&R:
隐藏在外部样式表链接中的其他类。 其他类嵌入到像img这样的东西中(比如旧的外部CSS打印格式控件)。 带有id和/或CLASSES的图例代码将与命名div类冲突。
父母{ 位置:相对; } 孩子{ 位置:绝对的; 左:50%; 变换:translateX (-50%); } <父> <孩子> 儿童> < / 父> < /