12

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

Community
  • 1
  • 1
Learning
  • 19,469
  • 39
  • 180
  • 373
  • 3
    possible duplication of http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally – Exor Jun 07 '12 at 04:57
  • It has been done nicely but i am afraid it might create problems as the main container has 1px height. I have to add vertical line which runs along with the page text so vertical line will grow dynamically in height. I had issue in past with this as Vertical line didn't grow as the parent div had fixed height. I am not good with css that is why i want to avoid this & have a solution pertaining to my layout. – Learning Jun 07 '12 at 05:16

3 Answers3

23

The answer moved to the original question

I did it: (demo on 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: auto is 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 top and bottom (does not work in IE7).

This trick will work with any sizes of 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;
}
Community
  • 1
  • 1
Vladimir Starkov
  • 19,264
  • 8
  • 60
  • 114
6

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;
}
Xella
  • 1,283
  • 10
  • 10
  • Perfect.. Thanks. this works for my solution.. I appreciate solution from other users also but yours is the one i was looking for... – Learning Jun 07 '12 at 10:37
1

Hi now you can used many method of this solution as like this

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>

Live demo http://jsfiddle.net/w9dxv/1/

more info http://www.brunildo.org/test/img_center.html

if you want Center horizontal and vertical align

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>

Live demo http://jsfiddle.net/HkEVZ/1/

if u want Center horizontally and vertically a single line of text

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>

Live demo http://jsfiddle.net/SVEtH/1/

if u want Center horizontal and vertical align Used to table properties as like this ..

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>

Live demo http://jsfiddle.net/J3Zc6/2/

Rohit Azad Malik
  • 31,410
  • 17
  • 69
  • 97