Vertically center a div without using absolute positioning?

Question

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

Yes, I've added some of the HTML and CSS. I didn't include the entire code b/c it is too long, but I will if it's necessary. Thanks! — nicatoby, Jul 29 '14 at 23:44
Possible duplicate of [How to Vertical align element in a div](https://stackoverflow.com/questions/79461/how-to-vertical-align-elements-in-a-div) — Jonathan Larouche, Oct 24 '19 at 11:56

bob · Answer 1 · 2023-06-07T00:01:39.317

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.

Move the element down half (or 50%) of the parent's height.
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>

Thanks, but what if you don't know the exact height of the parent element. For instance, I want the parent element to expand with growing content. — nicatoby, Jul 30 '14 at 16:52

score 2 · Answer 2 · answered Jul 28 '14 at 17:15

2

You can use:

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

..for the wrapper element

answered Jul 28 '14 at 17:15

scooterlord

15,124
11
49
68

robinochsner · Answer 3 · 2019-10-25T09:40:09.980

1

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

edited Oct 25 '19 at 09:40

answered Oct 24 '19 at 11:31

robinochsner

11
2

Vertically center a div without using absolute positioning?

3 Answers3