我有一个div标签，宽度设置为800像素。当浏览器宽度大于800像素时，它不应该拉伸div，但应该将它带到页面的中间。
当前回答
使用justify-content和align-items水平和垂直对齐div
https://developer.mozilla.org/de/docs/Web/CSS/justify-content https://developer.mozilla.org/en/docs/Web/CSS/align-items
超文本标记语言 的身体, .container { 高度:100%; 宽度:100%; ｝ .container { 显示:flex; 对齐项目:中心; justify-content:中心; ｝ .mydiv { 宽度:80 px; ｝ < div class = "容器" > <div class="mydiv">h & v aligned</div> < / div >
其他回答
<div></div>
div {
display: table;
margin-right: auto;
margin-left: auto;
}
Flexbox解决方案是2015年的发展方向。Justify-content: center用于父元素将内容对齐到它的中心。
HTML
<div class="container">
<div class="center">Center</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
}
输出
.container { 显示:flex; justify-content:中心; ｝ .center { 宽度:400 px; 填充:10 px; 背景:# 5 f85db; 颜色:# fff; 粗细:大胆的; 字体类型:大河马字体; ｝ < div class = "容器" > <div class="center"> div居中，文本左对齐 < / div >
使用justify-content和align-items水平和垂直对齐div
https://developer.mozilla.org/de/docs/Web/CSS/justify-content https://developer.mozilla.org/en/docs/Web/CSS/align-items
超文本标记语言 的身体, .container { 高度:100%; 宽度:100%; ｝ .container { 显示:flex; 对齐项目:中心; justify-content:中心; ｝ .mydiv { 宽度:80 px; ｝ < div class = "容器" > <div class="mydiv">h & v aligned</div> < / div >
出于某种原因，之前的答案对我都不起作用。这对我来说很管用，而且在不同的浏览器中也同样适用:
.center {
text-align: center;
height: 100%;
/* Safari, Opera, and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Internet Explorer 10 */
display: -ms-flexbox;
-ms-flex-pack: center;
-ms-flex-align: center;
}
<body>
<div style="width:800px; margin:0 auto;">
centered content
</div>
</body>
