How can I center text (horizontally and vertically) inside a div block?

Question

I have a div set to display:block (90px height and width), and I have some text inside.

I need the text to be aligned in the center both vertically and horizontally.

I have tried text-align:center, but it doesn't do the horizontal part, so I tried vertical-align:middle, but it didn't work.

Answer 1

• Approach 1 - transform translateX/translateY:

  Example Here / Full Screen Example

  In supported browsers (most of them), you can use top: 50%/left: 50% in combination with translateX(-50%) translateY(-50%) to dynamically vertically/horizontally center the element.

  .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
  }
  

---

• Approach 2 - Flexbox method:

  Example Here / Full Screen Example

  In supported browsers, set the display of the targeted element to flex and use align-items: center for vertical centering and justify-content: center for horizontal centering. Just don't forget to add vendor prefixes for additional browser support (see example).

  html, body, .container {
      height: 100%;
  }
  .container {
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

---

• Approach 3 - table-cell/vertical-align: middle:

  Example Here / Full Screen Example

  In some cases, you will need to ensure that the html/body element's height is set to 100%.

  For vertical alignment, set the parent element's width/height to 100% and add display: table. Then for the child element, change the display to table-cell and add vertical-align: middle.

  For horizontal centering, you could either add text-align: center to center the text and any other inline children elements. Alternatively, you could use margin: 0 auto assuming the element is block level.

  html, body {
      height: 100%;
  }
  .parent {
      width: 100%;
      height: 100%;
      display: table;
      text-align: center;
  }
  .parent > .child {
      display: table-cell;
      vertical-align: middle;
  }
  

---

• Approach 4 - Absolutely positioned 50% from the top with displacement:

  Example Here / Full Screen Example

  This approach assumes that the text has a known height - in this instance, 18px. Just absolutely position the element 50% from the top, relative to the parent element. Use a negative margin-top value that is half of the element's known height, in this case - -9px.

  html, body, .container {
      height: 100%;
  }
  .container {
      position: relative;
      text-align: center;
  }
  .container > p {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      margin-top: -9px;
  }
  

---

• Approach 5 - The line-height method (Least flexible - not suggested):

  Example Here

  In some cases, the parent element will have a fixed height. For vertical centering, all you have to do is set a line-height value on the child element equal to the fixed height of the parent element.

  Though this solution will work in some cases, it's worth noting that it won't work when there are multiple lines of text - like this.

  .parent {
      height: 200px;
      width: 400px;
      text-align: center;
  }
  .parent > .child {
      line-height: 200px;
  }
  

---

Methods 4 and 5 aren't the most reliable. Go with one of the first 3.

Answer 2

Using flexbox/CSS:

<div class="box">
    <p>&#x0D05;</p>
</div>

The CSS:

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

Answer 3

Give this CSS class to the targeted <div>:

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* Not necessary just to see the result clearly */
}

<div class="centered">This text is centered horizontally and vertically</div>