垂直&水平对齐页面的内部DIV中心 [英] Vertically & Horizontally Align inner DIV center of the page

问题描述

可能重复：

将< div>在页面上垂直和水平？

我的网站着陆页有容器 DIV与100％高度&宽度。我可以在中心水平对齐 InnerContainer div，但我不能把它放在中心垂直。我改变了几个属性，大多数的结果是一样的。

我有同样的例子 http： //jsfiddle.net/cwkzq/12/ ，我不知道我在做什么错了。

CSS代码 code> html，body，form {height：100％; }
body {margin：0; padding：0; border：1;背景颜色：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：红色;
}

HTML CODE

 <！ -  Container  - > 
< div class =Container> 
< div class =InnerContainer> 
<！ -  TopMenu栏 - > 
< div class =colorBar> 
 
< / div> 
<！ -  TopMenu栏 - > 
<！ - 中部 - > 
< div class =MiddleWrapper> 
<！ -  Left Title  - > 
< div class =Title> 
 
< / div> 
<！ -  Left Title  - > 
<！ - 大图片 - > 
< div class =ImageLeftWrapper> 
 
< / div> 
<！ - 大图片 - > 
<！ -  Logo Wrapper  - > 
< div class =LogoWrapper> 
 
< / div> 
<！ -  Logo Wrapper  - > 
<！ - 页面文本区域 - > 
< div class =PageText> 
 
< / div> 
<！ - 页面文本区域 - > 
<！ - 搜索栏 - > 
< div class =SearchBar> 
 
< / div> 
<！ - 搜索栏 - > 
<！ - 横幅图片 - > 
< div class =BannerImageWrapper> 
 
< / div> 
<！ - 横幅图片 - > 
< / div> 
<！ - 中部 - > 
<！ - 菜单包装器 - > 
< div class =MenuWrapper> 
 
< / div> 
<！ - 菜单包装器 - > 
<！ -  Footer Section  - > 
< div class =FooterWrapper> 
 
< / div> 
<！ -  Footer Section  - > 
< / div> 
< / div> 
<！ -  Container  - > 
  

大多数网上的例子都有固定宽度&高度容器DIV，而在我的case我的容器div有100％宽度& height

解决方案

如果你知道你要对齐的块的确切大小，那么这是最简单的方法： 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; 
} 
  

Possible Duplicate:
Best way to center a <div> on a page vertically and horizontally?

My website landing page has Container DIV with 100% Height & Width. I am able to align the InnerContainer div in center horizontally but i am not able to put it in center Vertically. I changed several properties mostly result remains same.

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.

CSS Code

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

解决方案

If you know the exact size of the block you want to align it's the easiest way to do this: jsfiddle

add this style to your .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;
}

这篇关于垂直&amp;水平对齐页面的内部DIV中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！