CODEWITHSUNDEEP
htmlcss
nicatoby
nicatoby

Reputation: 293

Vertically center a div without using absolute positioning?

I want a div to be vertically and horizontally centered. However, when I use the wrapper (relative) -->container (absolute) workaround, the footer at the bottom gets pushed all the way to the top of the screen, and then I am unable to move the footer at all. So, how can I center the tan box vertically and horizontally without using absolute positioning?

HTML:

<body>
    <div id="wrapper">
        <div id="container">
            <div id="menu">
                <ul>
                    <?php wp_list_pages('title_li='); ?>
                </ul>
            </div>
            <div id="fullerton" class="clearfix">
                <a href="#"><img src="<?php echo get_template_directory_uri(); ?>/images/fullertonmenu.png" /></a>
            </div>
            <div id="logo" >
                <img src="<?php echo get_template_directory_uri(); ?>/images/HB-Logo.png" />
            </div>
            <div id="comingsoon">
                <a href="#"><img src="<?php echo get_template_directory_uri(); ?>/images/comingsoon.png" /></a>
            </div>
            <?php endwhile; ?>  
            </div>
        </div>
    <div id="footer"><!-- Footer Content Begins Here -->
        <p>&copy; <?php bloginfo('name'); ?>, by lapetitefrog</p>
    </div>
</body>

CSS:

body {
    text-align: center;
    padding: 0;
    margin: 0 auto;
    background-image: url(images/Wood_Background_3.jpg);
    background-repeat: no-repeat;
    background-color: #20130b;
    max-width: 2048px;
}
#wrapper{
    width: 960px;
    height: 400px;
    bottom: 50%;
    right: 50%;
    position: absolute;
    }
#container {
    left: 50%;
    position: relative;
    top: 50%;
    padding: 20px 0 0 0;
    font-family: Arial, Times, serif;
    background-image: url(images/light_wood.jpg);
    background-repeat: no-repeat;
    overflow: auto;
}
/* ========================================================== Header Styles ======= */

#header {
    height: 50px;
    background-color: #8B0000;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
 } 
}

/* ========================================================== Content Styles ======= */

#content {
    font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Verdana,sans-serif;
    height: auto;
    overflow: hidden;
}

#content p {
    font-size: 13px;
}

#content h2, h3, h4, h5 {
    color: #d54e21;
    font-family: Georgia, "Times New Roman", Times, serif;
}

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

#fullerton{
    float: left;
    width: 180px;
    height: 70px;
    margin: 105px 70px;
    }
#logo{
    float: left;
    width: 320px;
    height: 281px;
    margin: auto;
    }
#comingsoon{
    float:left;
    width: 180px;
    height: 70px;
    margin: 105px 70px;
    }

/* ========================================================== Footer Styles ======= */

#footer {
    width: 100%;
    height: 50px;
    float: left;
    font-family: 'Roboto Slab', serif;
}

#footer p {
    margin: 10px 25px;
    color: #fff;
}

Upvotes: 3

Views: 22036

Answers (3)

bob
bob

Reputation: 993

To center an element both horizontally and vertically without absolute positioning, you can use the CSS property: transform with a value of translate() in combination with relative positioning.

For example, a relatively positioned element can be moved like so:

transform: translateY(20px);

This will move your element 20px down on the 'Y' axis.

To position your element centered vertically we actually make two movements.

  1. Move the element down half (or 50%) of the parent's height.
  2. Move the element back up half (or -50%) of it's own height.

The end result is a perfectly centered element regardless of any wrapping or multiple lines of text. Browser support is IE9+.

The property transform-style: preserve-3d is used to stop elements becoming blurry when translate places them on a "half-pixel".

div { 
  border: 2px solid #bbb; 
  padding: 0.5em; 
}     

.parent { 
  height: 150px; 
  width: 300px; 
  background: #ddd;
  transform-style: preserve-3d; 
}

.center-vertically-and-horizontally {
  background: white; 
  width: 200px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="parent">
  <div class="center-vertically-and-horizontally">
            Centered both vertically and horizontally within it's parent.</div>
</div>

Upvotes: 11

robinochsner
robinochsner

Reputation: 11

Side Note: Mind that the parent of .element has to be displayed as a table (display: table;) The height of the parent also has to be defined (obviously)

.element-parent {
  display: table;
  height: 100%;
}

.element {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

Upvotes: 1

scooterlord
scooterlord

Reputation: 15349

You can use:

.element {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

..for the wrapper element

Upvotes: 2

Related Questions