垂直和水平对齐页面的内部DIV中心

Question

可能重复:
在页面上垂直和水平居中<div>的最佳方法是什么？

我的网站登录页面的ContainerDIV具有100%的高度和宽度.我能够将InnerContainerdiv水平对齐,但我无法将其置于垂直中心.我改变了几个属性,结果大致相同.

我有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%的宽度和高度

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;
}

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;
}