Html 无论屏幕大小如何，将 DIV 居中到页面中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18510951/
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
Center a DIV to the center of page regardless of screen size
提问by dan4duk
I want to center the below div container to that the site appears in the center of the page, regardless of the screen size.
我想将下面的 div 容器居中，使站点显示在页面的中心，无论屏幕大小如何。
http://penarthpc.com/~droneboy/
http://penarthpc.com/~droneboy/
I've played around a little bit but appear to be missing something.
我玩了一点，但似乎缺少一些东西。
回答by a.ahmed
The solution to this problem is using autofor marginin the CSS AND providing some width to the DIV itself:
这个问题的解决方案是在 CSS 中使用autoformargin并为 DIV 本身提供一些宽度：
div.centered {
margin-left:auto;
margin-right:auto;
width:80%;
}
回答by Tricky12
Easiest way to center something regardless of page width is margin: auto;in your CSS, with height and width defined.
无论页面宽度如何，将内容居中的最简单方法是margin: auto;在 CSS 中定义高度和宽度。
.class {
height: 50px;
width: 50px;
margin: auto;
}
JSFiddle: http://jsfiddle.net/rVXBH/
JSFiddle：http: //jsfiddle.net/rVXBH/
回答by FastTrack
.center-div {
width: 600px;
height: 600px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;
}
This will center your DIV with class center-divhorizontally AND vertically. The margin-leftmust be negative half of what your width is. The margin-topmust be negative half the height.
这将使您的 DIV 与类center-div水平和垂直居中。的margin-left必须是你的宽度是什么样的负面一半。在margin-top必须为负值高度的一半。
To just center horizontally:
水平居中：
.center-div {
width: 600px;
height: 600px;
position: relative;
margin-left: auto;
margin-right: auto;
}
回答by medBouzid
if you want to center the container (vertical) :
如果要使容器居中（垂直）：
if (horizontal) look at this :
如果（水平）看这个：
回答by Atif
simple. Just give the container margin of "0 auto"
简单的。只需给出“0 auto”的容器边距
margin: 0 auto;
回答by Dharma Raju
Below code will work for any screen size.
下面的代码适用于任何屏幕尺寸。
div.centered {
background-color: rgb(18, 80, 144);
height: 100vh;
}
div.centered span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: rgb(250, 255, 255);
}<div class="centered">
<span>Center</span>
</div>回答by Vishwanath
CSS below to center any element :
下面的 CSS 使任何元素居中：
div.className {
text-align: center;
}
回答by fditz
Here is a great method I use, it makes use of a beforeselector to create a invisible div that takes care of the vertical alignment:
这是我使用的一个很好的方法，它使用before选择器来创建一个不可见的 div 来处理垂直对齐：
HTML:
HTML：
<body>
<div id="outter-div">
<div id="aligned">
<h1>A Nice Title</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
</div>
</div>
</body>
CSS:
CSS：
/* This parent can be any width and height */
#outter-div {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
#outter-div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
#aligned{
display: inline-block;
vertical-align: middle;
width: 300px;
}
This can be found on this postwhich also has a demo on jsbin!
