Html 垂直和水平对齐页面的内部 DIV 中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10925852/
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
Vertically & Horizontally Align inner DIV center of the page
提问by Learning
Possible Duplicate:
Best way to center a <div> on a page vertically and horizontally?
可能的重复：
在页面上垂直和水平居中 <div> 的最佳方法？
My website landing page has ContainerDIV with 100% Height & Width. I am able to align the InnerContainerdiv in center horizontally but i am not able to put it in center Vertically. I changed several properties mostly result remains same.
我的网站登陆页面有Container100% 高度和宽度的 DIV。我能够将InnerContainerdiv 水平居中对齐，但我无法将其垂直居中。我更改了几个属性，结果大多保持不变。
I have same example of http://jsfiddle.net/cwkzq/12/and i am not sure where i am doing things wrong. I would appreciate help on this.
我有http://jsfiddle.net/cwkzq/12/ 的相同示例，但我不确定我在哪里做错了。我很感激这方面的帮助。
CSS Code
CSS 代码
html, body,form { height: 100%; }
body { margin: 0; padding: 0; border: 1; background-color:Aqua; }
.Container { width: 100%;height: 100%; padding: 0; font-size: 12px; border:1px solid green;
vertical-align: middle; }
.InnerContainer
{ vertical-align: middle; width: 400px;height: 350px; border-left:1px solid;
border-right:1px solid; border-color:#f5f5f5;margin: 0 auto; padding: 0;
font-size: 12px; background-color:Red;
}
HTML CODE
代码
<!-- Container -->
<div class="Container">
<div class="InnerContainer">
<!-- TopMenu Bar -->
<div class="colorBar">
</div>
<!-- TopMenu Bar -->
<!-- Middle Part -->
<div class="MiddleWrapper">
<!-- Left Title -->
<div class="Title">
</div>
<!-- Left Title -->
<!-- Large Image -->
<div class="ImageLeftWrapper">
</div>
<!-- Large Image -->
<!-- Logo Wrapper -->
<div class="LogoWrapper">
</div>
<!-- Logo Wrapper -->
<!-- Page Text Area -->
<div class="PageText">
</div>
<!-- Page Text Area -->
<!-- Search Bar -->
<div class="SearchBar">
</div>
<!-- Search Bar -->
<!-- Banner Images -->
<div class="BannerImageWrapper">
</div>
<!-- Banner Images -->
</div>
<!-- Middle Part -->
<!-- Menu Wrapper -->
<div class="MenuWrapper">
</div>
<!-- Menu Wrapper -->
<!-- Footer Section -->
<div class="FooterWrapper">
</div>
<!-- Footer Section -->
</div>
</div>
<!-- Container -->
Mostly all the example on net have fixed width& Height Container DIV while in my case my container div has 100% width & height
大多数情况下，网络上的所有示例都具有固定的宽度和高度容器 DIV，而在我的情况下，我的容器 div 具有 100% 的宽度和高度
采纳答案by Xella
If you know the exact size of the block you want to align it's the easiest way to do this: jsfiddle
如果您知道要对齐的块的确切大小，这是最简单的方法：jsfiddle
add this style to your .InnerContainer
将此样式添加到您的 .InnerContainer
.InnerContainer{
width: 400px;
height: 350px;
border-left: 1px solid;
border-right: 1px solid;
border-color: #f5f5f5;
margin: 0 auto;
padding: 0;
font-size: 12px;
background-color: red;
position: relative;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -175px;
}
回答by Vladimir Starkov
The answermoved to the original question
答案移至原问题
I did it: (demo on dabblet.com)
我做到了：（dabblet.com 上的演示）
The main trick in this demo is that in the normal flow of elements going from top to bottom, so the margin-top: autois set to zero. However, for an absolutely positioned element acts the same distribution of free space, and similarly can be centered vertically at the specified topand bottom(does not work in IE7).
这个演示的主要技巧是在元素从上到下的正常流动中，所以margin-top: auto设置为零。然而，对于一个绝对定位的元素，自由空间的分布是相同的，同样可以在指定的top和垂直居中bottom（在 IE7 中不起作用）。
This trick will work with any sizes of div.
这个技巧适用于任何大小的div.
HTML:
HTML：
<div></div>
CSS:
CSS：
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
回答by Rohit Azad
Hi now you can used many method of this solution as like this
嗨，现在您可以像这样使用此解决方案的许多方法
Css
css
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: ...;
height: ...;
}
.wraptocenter * {
vertical-align: middle;
}
.wraptocenter {
display: block;
background:green;
height:500px;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
.child{
background:pink;
min-height:100px;
width:100px;
display:inline-block;
}
HTML
HTML
<div class="wraptocenter">
<span></span>
<div class="child"> Hello I am child and ver and horz....</div>
</div>
Live demo http://jsfiddle.net/w9dxv/1/
现场演示http://jsfiddle.net/w9dxv/1/
more info http://www.brunildo.org/test/img_center.html
更多信息http://www.brunildo.org/test/img_center.html
if you want Center horizontal and vertical align
如果你想要 居中水平和垂直对齐
Css
css
.chv{
width:200px;
height:100px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-50px;
border:solid 1px red;
}
HTML
HTML
<div class="chv">
Center horizontal and vertical align
</div>
Live demo http://jsfiddle.net/HkEVZ/1/
现场演示http://jsfiddle.net/HkEVZ/1/
if u want Center horizontally and vertically a single line of text
如果你想水平和垂直居中一行文本
Css
css
.alldiv{
width:400px;
height:200px;
text-align:center;
line-height:200px;
border:solid 1px red;
}
HTML
HTML
<div class="alldiv">
Center horizontally and vertically a single line of text
</div>
Live demo http://jsfiddle.net/SVEtH/1/
现场演示http://jsfiddle.net/SVEtH/1/
if u want Center horizontal and vertical alignUsed to table properties as like this ..
如果你想要居中水平和垂直对齐用于像这样的表格属性..
Css
css
.parent{
display:table;
height:300px;
text-align:center;
border:solid 1px red;
width:100%;
}
.child{
display:table-cell;
vertical-align:middle;
border:solid 1px green;
}
HTML
HTML
<div class="parent">
<div class="child">
Center horizontal and vertical align
</div>
</div>
Live demo http://jsfiddle.net/J3Zc6/2/
