Vertically Center Text Inside A Div

I'm trying to vertically center some text inside a div. Sounds easy but I can't get it. Here's the code, sorry for the bad formatting and practices, it's something whipped up fast

Solution 1:

Since you are using flexbox, you don't need to use vertical-align.

Here are two things to consider:

1. When you create a flex container only the child elements become flex items. Any descendant elements beyond the children are not flex items and flex properties don't apply to them.

   Your div boxes wrapping your text are not flex items. They are children of flex items (#first, #second, etc.) and flex properties don't apply.

2. If you want to apply flex properties to the children of flex items, you need to make the flex item a flex container, as well.

   Try this:

   #first { 
       display: flex; 
       justify-content: center; 
       align-items: center;
   }
   
   #second { 
       display: flex; 
       justify-content: center; 
       align-items: center;
   }
   

#first {
  display: flex;
  justify-content: center;
  align-items: center;
}

#second {
  display: flex;
  justify-content: center;
  align-items: center;
}

<divid="container"style="text-align:center ;border: 5px solid blue; display:flex; flex-direction:row ; justify-content:center; height:100px"><divid="first"style=" min-height:100px; min-width:200px; background-color:green"><divstyle="vertical-align:middle">first box</div></div><divid="second"style=" min-height:100px; min-width:200px;  background-color:yellow"><divstyle="vertical-align:middle">
      second box
    </div></div><svgversion="1.1"id="SVG"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"x="0px"y="0px"viewBox="0 0 300 300"preserveAspectRatio="xMidYMid meet"height="100%"width: "auto"><!--snipped away svg code--></svg><divid="third"style="min-height:100px; min-width:200px; background-color:red"><divstyle="">
      third box
    </div></div><divid="fourth"style="min-height:100px; min-width:200px; background-color:cyan; vertical-align:middle "><p>
      fourth box
    </p></div></div>

---

Re: vertical-align

The reason vertical-align: middle wasn't working for you is because this property centers within the inline dimension. So it actually was vertically centering the text... within its line-height. To get the behavior you expect, specify a line-height equal to the container height.

#third {
    vertical-align: middle;
    line-height: 100px;
}

#first {
  display: flex;
  justify-content: center;
  align-items: center;
}

#second {
  display: flex;
  justify-content: center;
  align-items: center;
}

#third {
  vertical-align: middle;
  line-height: 100px;
}

<divid="container"style="text-align:center ;border: 5px solid blue; display:flex; flex-direction:row ; justify-content:center; height:100px"><divid="first"style=" min-height:100px; min-width:200px; background-color:green"><divstyle="vertical-align:middle">first box</div></div><divid="second"style=" min-height:100px; min-width:200px;  background-color:yellow"><divstyle="vertical-align:middle">
      second box
    </div></div><svgversion="1.1"id="SVG"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"x="0px"y="0px"viewBox="0 0 300 300"preserveAspectRatio="xMidYMid meet"height="100%"width: "auto"><!--snipped away svg code--></svg><divid="third"style="min-height:100px; min-width:200px; background-color:red"><divstyle="">
      third box
    </div></div><divid="fourth"style="min-height:100px; min-width:200px; background-color:cyan; vertical-align:middle "><p>
      fourth box
    </p></div></div>

Solution 2:

This code will center all the text:

#containerdivdiv, #containerdivp {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

Expand this live demo to see it in action:

#container {
    text-align:center;
    border: 5px solid blue;
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:100px;
}
#first {
    min-height:100px;
    min-width:200px;
    background-color:green;
}
#second {
    min-height:100px;
    min-width:200px;
    background-color:yellow;
}
#third {
    min-height:100px;
    min-width:200px;
    background-color:red;
}
#fourth {
    min-height:100px;
    min-width:200px;
    background-color:cyan;
}
#containerdivdiv, #containerdivp {
    position: relative;
	top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

<divid="container"><divid="first"><div>first box</div></div><divid="second"><div>second box</div></div><svgversion="1.1"id="SVG"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"x="0px"y="0px"viewBox="0 0 300 300"preserveAspectRatio="xMidYMid meet"height="100%"width: "auto"><!--snipped away svg code--></svg><divid="third"><div>third box</div></div><divid="fourth"><p>fourth box</p></div></div>

Normally just the first three properties are required, but your fourth element was a <p> element, which has top and bottom margins, so I added margin: 0; to cancel those out. This is the most reliable way to center elements vertically regardless of markup unless you can use flexbox.