How To Align Text Vertically Center In Div With CSS

Align Text Vertically Center In Div

Here we explain about how to align text vertically center in div. Lets consider following example. It contains a div with some text inside. Follow these style for aligning text vertically center inside div.



.outerDiv
{
     background-color: skyblue;
     height: 200px;
     line-height: 200px;
}



Align Text Vertically Center In Div

Lets consider another example here. It contains two div - outerDiv and innerDiv. Lets consider how to place contents of innerdiv vertically center within outerDiv.



.outerDiv
{
     background-color: skyblue;
     height: 200px;
     line-height: 200px;
}


.innerdiv
{
     background-color: red;
     width: 200px;
     text-align: center;
     margin: 0px auto;
}