Centering 2 Divs Inside Another Vertically

Vertically centering a div inside another div

tl;dr

Vertical align middle works, but you will have to use table-cell on your parent element and inline-block on the child.

This solution is not going to work in IE6 & 7.
Yours is the safer way to go for those.
But since you tagged your question with CSS3 and HTML5 I was thinking that you don't mind using a modern solution.

The classic solution (table layout)

This was my original answer. It still works fine and is the solution with the widest support. Table-layout will impact your rendering performance so I would suggest that you use one of the more modern solutions.

Here is an example

---

Tested in:

• FF3.5+
• FF4+
• Safari 5+
• Chrome 11+
• IE9+

---

HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

---

Modern solution (transform)

Since transforms are fairly well supported now there is an easier way to do it.

CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

Demo

---

♥ my favourite modern solution (flexbox)

I started to use flexbox more and more its also well supported now Its by far the easiest way.

CSS

.cn {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Demo

More examples & possibilities:
Compare all the methods on one pages

Centering 2 Divs inside another vertically

Live Demo

• Remove float: left from #left and #right.

• Instead, use display: inline-block:

  #left, #right {
      display: inline-block;
      vertical-align: middle;
  }
  

• Due to using display: inline-block, you have to deal with the whitespace issue. I chose to remove the whitespace in the HTML between </div> and <div id="right">. See here for what happens if you don't do that. Removing the whitespace really is the easiest fix, but there are other ways.

Vertically center two divs inside a wrapper (with dynamic content and content below the wrapper)

Use display: inline-block + vertical-align: middle on the blocks, so they would be aligned just like you want them to.

Look at this example: http://jsfiddle.net/kizu/Tky8T/

Even more: the height of the red div can be dynamic too!

Center two divs in vertically

Try display:flex property to make it work.

Updated CSS:

.subtext-container {
  position: absolute;
  width: 180px;
  height: 65px;
  color: #ffffff;
  background-color: blue;
  bottom: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.color-teal {
  max-height: 40px;
  overflow: hidden;
  background-color: teal;
}

.color-green {
  height: 13px;
  font-size: 9px;
  background-color: green;
}

Example fiddle : Demo

Note : Please check the browser support.

Browser support : http://caniuse.com/#feat=flexbox

How can I center a div within another div?

You need to set the width of the container (auto won't work):

#container {
    width: 640px; /* Can be in percentage also. */
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

The CSS reference by MDN explains it all.

Check out these links:

• auto - CSS reference | MDN
• margin - CSS reference | MDN
• What is the meaning of auto value in a CSS property - Stack Overflow

In action at jsFiddle.

Vertically center a div inside another div

The vertical-align property applies only to inline-level and table-cell elements (source). In your code you're working with block-level elements.

Try this flexbox alternative:

#wrapper {    border: 1px solid red;    width: 500px;    height: 500px;    display: flex;               /* establish flex container */    align-items: center;         /* vertically center flex items */}
#block {    border: 1px solid blue;    width: 500px;    height: 250px;    /* vertical-align: middle; */}

<div id='wrapper'>    <div id='block'> I'm Block </div><div>

Vertical alignment of a DIV inside another DIV

Add this to your slideshow element, using flexbox. Flex Needs prefixing for IE11 (caniuse)

.slideshow {
    display: flex;
    align-items: center;
}

Edit: I enabled the commented height and width styles in your jsFiddle, but this method will vertically align slideshow child regardless of width and height.

vertical align text in two different div's inside another div

Is this similar to what you are trying to achieve?

#outer {    height:100%;    padding:10% 0;    box-sizing:border-box;}
#inner1 {  height:50%;  width:100%;  display:flex;  justify-content:center;  align-items:center;}

#inner2 {  height:50%;  width:100%;  display:flex;  justify-content:center;  align-items:center;}
html, body { height: 100%; }#outer {    background-color: purple;}#inner1 {    background-color: yellow;}
#inner2 {    background-color: red;}

<div id="outer">    <div id="inner1">         Test text 1     </div>     <div id="inner2">         Test text 1    </div></div>

Vertically center two divs

alignement is to be made from the parent, else use margin or align-self.

.alert-container {  display: flex;  justify-content: start;  min-width: 100%;  min-height: 3rem;  margin: 0;  padding: 0 0 0 5px;  border: 1px solid rgb(243, 165, 70);  border-radius: 5px;  background-color: #FEE1BD;  align-items: center;}

/* flex children 

.image-container {}
.text-container {
}*/
img {  max-height: 70px;}
i.fa {  font-size: 70px;  color: tomato;  padding: 0.2em}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /><div class="alert-container">  <div class="image-container">    <img src="http://2.bp.blogspot.com/-pfDiDXn-GKA/TaN3OtJC2YI/AAAAAAAAEE8/mrp-RKgEWgw/s1600/ExclamationPoint-main_Full.jpg" />  </div>  <div class="text-container">    <div>      <div>The content inside the</div>      <div>parent div is variable</div>      <div>there may be 1, 2, 3, or more divs</div>    </div>  </div></div>
<div class="alert-container">  <div class="image-container">
    <i class="fa fa-exclamation-circle"></i>  </div>  <div class="text-container">    <div>      <div>The content inside the</div>      <div>parent div is variable</div>      <div>there may be 1, 2, 3, or more divs</div>      <div>...</div>      <div>...</div>      <div>...s</div>      <div>...</div>      <div>...</div>    </div>  </div></div>

Center two DIVs, including their content, vertically inside another parent DIV

The trick here is to use display: table for the parent div and display: table-cell for the children; otherwise, vertical-align is not respected.

JSFiddle: DEMO

.parentBox {
    width: 100%;
    height: 100px;
    border: 1px solid lime;
    display: table;
}

.left_box,
.right_box {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

.left_box {
    background:green;
}
.right_box {
    width: 18%;
    height: 100%;
    background:blue;
}
.inputBox {
    height:80px;
}

---

Related Topics