垂直和水平居中页面内部DIV

Question

可能的重复问题：
如何在网页上垂直和水平居中一个<div> 元素的最佳方法？

我的网站主页有一个高度和宽度均为100%的Container DIV。我可以将InnerContainer div 在水平方向上居中对齐，但是我无法将其在垂直方向上居中。我尝试更改了多个属性，但大多数情况下结果都相同。

我有一个与http://jsfiddle.net/cwkzq/12/ 相同的示例，但我不确定我做错了什么。我希望能得到帮助。

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代码

<!--  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   -->

大多数网络上的示例都有固定宽度和高度的容器DIV，而在我的情况下，我的容器DIV具有100％的宽度和高度。

- Learning

---

可能重复：https://dev59.com/inRC5IYBdhLWcg3wROtQ - Exor

做得很好，但我担心它可能会出现问题，因为主容器的高度只有1像素。我必须添加沿着页面文本运行的垂直线，因此垂直线将动态增长高度。过去我曾遇到过这个问题，因为父div的高度是固定的，所以垂直线没有增长。我不擅长css，这就是为什么我想避免这种情况并寻找与我的布局相关的解决方案。 - Learning

Answer 1

答案已移至原问题

我已经做到了：（在 dabblet.com 上的演示）

这个演示的主要技巧是在元素正常从上到下的流程中，所以margin-top: auto被设置为零。然而，对于绝对定位的元素，自由空间的分配方式相同，并且同样可以在指定的top和bottom垂直居中（在IE7中不起作用）。

这个技巧适用于任何div的大小。

HTML：

<div></div>

CSS：

div {
    width: 100px;
    height: 100px;
    background-color: red;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;
}

- Vladimir Starkov

Answer 2

如果您知道要对齐的块的确切大小，那么这是最简单的方法：jsfiddle。将此样式添加到您的.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;
}

- Xella

---

太好了，谢谢。这对我的解决方案有效。我也感谢其他用户提供的解决方案，但你的是我正在寻找的那一个。 - Learning

Answer 3

你好，现在你可以像这样使用许多方法来解决问题。

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

<div class="wraptocenter">
    <span></span>
    <div class="child"> Hello I am child and ver and horz....</div>
</div>

演示链接 http://jsfiddle.net/w9dxv/1/

更多信息 http://www.brunildo.org/test/img_center.html

---

如果你想要水平垂直居中

Css

.chv{
width:200px;
    height:100px;
    position:absolute;
    left:50%;
    top:50%;
margin-left:-100px;
    margin-top:-50px;
    border:solid 1px red;
}

HTML

<div class="chv">
    Center horizontal and vertical align
</div>

演示链接 http://jsfiddle.net/HkEVZ/1/

---

如果您想要将单行文本水平垂直居中

CSS

.alldiv{
width:400px;
    height:200px;
    text-align:center;
    line-height:200px;
    border:solid 1px red;
}

HTML

<div class="alldiv">
Center horizontally and vertically a single line of text
</div> 

演示链接 http://jsfiddle.net/SVEtH/1/

---

如果您想要水平和垂直居中对齐，可以使用表格属性，如下所示...

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

<div class="parent">
<div class="child">
Center horizontal and vertical align
</div>
</div>

实时演示 http://jsfiddle.net/J3Zc6/2/

- Rohit Azad Malik