如何使用 CSS 将 div 放在浏览器的中心？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1040554/
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 put a div in center of browser using CSS?
提问by James
How to put a div in center of browser both vertically and horizontallyusing CSS only?
如何仅使用 CSS将 div垂直和水平放置在浏览器的中心？
Make sure it works on IE7 too.
确保它也适用于 IE7。
If everything fails, we may use JavaScript, but a last choice.
如果一切都失败了，我们可能会使用 JavaScript，但这是最后的选择。
回答by James
HTML:
HTML：
<div id="something">... content ...</div>
CSS:
CSS：
#something {
position: absolute;
height: 200px;
width: 400px;
margin: -100px 0 0 -200px;
top: 50%;
left: 50%;
}
回答by jrista
The simplest solution is just to use an auto margin, and give your div a fixed width and height. This will work in IE7, FF, Opera, Safari, and Chrome:
最简单的解决方案是使用自动边距，并为您的 div 提供固定的宽度和高度。这将适用于 IE7、FF、Opera、Safari 和 Chrome：
HTML:
HTML：
<body>
<div class="centered">...</div>
</body>
CSS:
CSS：
body { width: 100%; height: 100%; margin: 0px; padding: 0px; }
.centered
{
margin: auto;
width: 400px;
height: 200px;
}
EDIT!! Sorry, I just noticed you said vertically...the default "auto" margin for top and bottom is zero...so this will only center it horizontally. The only solution to position vertically and horizontally is to muck around with negative margins like the accepted answer.
编辑！！抱歉，我刚刚注意到您说的是垂直...顶部和底部的默认“自动”边距为零...所以这只会将其水平居中。垂直和水平定位的唯一解决方案是像接受的答案一样使用负边距。
回答by Rony
margin: auto;
回答by Mohammad Kermani
try this
尝试这个
#center_div
{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
回答by Ajay Kumar
Using this:
使用这个：
center-div { margin: auto; position: absolute; top: 50%; left: 50%; bottom: 0; right: 0; transform: translate(-50% -50%); }
回答by Chris
You can also set your div with the following:
您还可以使用以下内容设置 div：
#something {width: 400px; margin: auto;}
With that setting, the div will have a set width, and the margin and either side will automatically set depending on the with of the browser.
使用该设置，div 将具有设置的宽度，边距和任一侧将根据浏览器的设置自动设置。
回答by Rado
<html>
<head>
<style>
*
{
margin:0;
padding:0;
}
html, body
{
height:100%;
}
#distance
{
width:1px;
height:50%;
margin-bottom:-300px;
float:left;
}
#something
{
position:relative;
margin:0 auto;
text-align:left;
clear:left;
width:800px;
min-height:600px;
height:auto;
border: solid 1px #993333;
z-index: 0;
}
/* for Internet Explorer */
* html #something{
height: 600px;
}
</style>
</head>
<body>
<div id="distance"></div>
<div id="something">
</div>
</body>
</html>
Tested in FF2-3, IE6-7, Opera and works well!
已在 FF2-3、IE6-7、Opera 中测试，运行良好！
回答by Cengkuru Michael
.center {
margin: auto;
margin-top: 15vh;
}
Should do the trick
应该做的伎俩
回答by SANA
<center>
<h3 > your div goes here!</h3>
</center>
回答by user2567780
For Older browsers, you need to add this line on top of HTML doc
对于较旧的浏览器，您需要在 HTML doc 顶部添加此行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
