Html 如何将 <div> 与页面的中间（水平/宽度）对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/953918/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align a <div> to the middle (horizontally/width) of the page
提问by Shimmy Weitzhandler
I have a divtag with widthset to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.
我有一个设置为800 像素的div标签。当浏览器宽度大于800 像素时，不应拉伸，而应将其带到页面中间。widthdiv
回答by AgileJon
<body>
<div style="width:800px; margin:0 auto;">
centered content
</div>
</body>
回答by Summo
position: absoluteand then top:50%and left:50%places the top edge at the vertical center of the screen, and the left edge at the horizontal center, then by adding margin-topto the negative of the height of the div, i.e., -100 shifts it above by 100 and similarly for margin-left. This gets the divexactly in the center of the page.
position: absolute然后top:50%和left:50%地方在屏幕的垂直中心处的水平中心左侧边缘的顶部边缘，并且，然后通过加入margin-top到div的高度的负的，即，-100移位它上面由100同样地，对于margin-left。这将div恰好位于页面的中心。
#outPopUp {
position: absolute;
width: 300px;
height: 200px;
z-index: 15;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px;
background: red;
}<div id="outPopUp"></div>回答by Manoj Kumar
Modern Flexboxsolution is the way to go in/from 2015. justify-content: centeris used for the parent element to align the content to the center of it.
现代Flexbox解决方案是进入/从 2015 年开始的方式。justify-content: center用于父元素将内容与其中心对齐。
HTML
HTML
<div class="container">
<div class="center">Center</div>
</div>
CSS
CSS
.container {
display: flex;
justify-content: center;
}
.center {
width: 800px;
}
Output
输出
.container {
display: flex;
justify-content: center;
}
.center {
width: 800px;
background: #5F85DB;
color: #fff;
font-weight: bold;
font-family: Tahoma;
}<div class="container">
<div class="center">Centered div with left aligned text.</div>
</div>回答by Tomas Aschan
Do you mean that you want to center it vertically or horizontally? You said you specified the
heightto 800 pixels, and wanted the div not to stretch when thewidthwas greater than that...To center horizontally, you can use the
margin: auto;attribute in CSS. Also, you'll have to make sure that thebodyandhtmlelements don't have any margin or padding:
您的意思是要垂直居中还是水平居中？您说您将 指定
height为 800 像素，并希望 divwidth在大于800 像素时不拉伸...要水平居中，您可以使用
margin: auto;CSS 中的属性。此外，您必须确保body和html元素没有任何边距或填充：
html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
回答by Mohammad
<div></div>
div {
display: table;
margin-right: auto;
margin-left: auto;
}
回答by Kevin Dungs
To make it also work correctly in Internet Explorer 6 you have to do it as follows:
要使其在 Internet Explorer 6 中也能正常工作，您必须执行以下操作：
HTML
HTML
<body>
<div class="centered">
centered content
</div>
</body>
CSS
CSS
body {
margin: 0;
padding: 0;
text-align: center; /* !!! */
}
.centered {
margin: 0 auto;
text-align: left;
width: 800px;
}
回答by RajeshKdev
You can also use it like this:
你也可以这样使用它：
<div style="width: 60%; margin: 0px auto;">
Your contents here...
</div>
回答by Wilt
Div centered vertically and horizontally inside the parent without fixing the content size
Div 在父级内部垂直和水平居中而不固定内容大小
Here on this pageis a nice overview with several solutions, too much code to share here, but it shows what is possible...
这个页面上有一个很好的概述，有几个解决方案，这里分享的代码太多，但它展示了可能的......
Personally I like this solutionwith the famous transform translate -50% trick the most. It works well for both fixed (% or px) and undefined height and width of your element.
The code is as simple as:
就我个人而言，我最喜欢这个解决方案和著名的变换翻译 -50% 技巧。它适用于元素的固定（% 或 px）和未定义的高度和宽度。
代码很简单：
HTML:
HTML：
<div class="center"><div>
CSS:
CSS：
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* for IE 9 */
-webkit-transform: translate(-50%, -50%); /* for Safari */
/* optional size in px or %: */
width: 100px;
height: 100px;
}
Here a fiddlethat shows that it works
回答by Bharat Chhatre
Simply use the centertag just after the bodytag, and end the centertag just before bodyends:
只需在center标签之后使用body标签，并center在body结束之前结束标签：
<body>
<center>
... Your code here ...
</center>
</body>
This worked for me with all the browsers I have tried.
这对我尝试过的所有浏览器都有效。
回答by Roy
This can be easily achieved via flex container.
这可以通过 flex 容器轻松实现。
.container{
width: 100%;
display: flex;
height: 100vh;
justify-content: center;
}
.item{
align-self: center;
}
