Post Tags

CSS Tricks

Pretty posts

Center Text in Middle of Div by CSS on Horizontal and Vertical
In this css tricks, we will learn how to position text or content in the middle of div both vertical and horizontal. Sometimes we used line-height code and that's not good to add text in the middle of div. See following example.

HTML
<div class="middle-content">
  <div class="middle-wrapper">
     Position text in middle of div
  </div>
</div>

CSS
.middle-content {
  display: table;
}
.middle-wrapper {
  display: table-cell;
  vertical-align: middle;
}

Customize: I used display: table; in first div class "middle-content" so that all div content behave like a <table> element. display: table-cell; added in second div class "middle-wrapper" so that it behave like a <td> element and vertical-align: middle; added to reach our goal text position in middle of div.

If you also want to text in center, you can use text-align: center; in the .middle-wrapper class.

That's it. I think that you enjoyed this article to improve your webdesign knowledge.