How To Align Text Vertically Center In Div With CSS




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.

How To Align Text Vertically Center In Div Using CSS, Align Text Vertically Center In Div Using CSS, Align Text Vertically Center In Div With CSS, Align Text Vertically Center In Div, Align Text Vertically Center Within Div, HTML, CSS, Asp.Net, PHP

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






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

How To Align Text Vertically Center In Div Using CSS, Align Text Vertically Center In Div Using CSS, Align Text Vertically Center In Div With CSS, Align Text Vertically Center In Div, Align Text Vertically Center Within Div, HTML, CSS, Asp.Net, PHP

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



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