Text not fully centered in Div?

Question

I am pretty new to CSS and looked at some guide about how to center a text inside a div, but now it's not fully, but just almost centered...

Image: https://cdn.discordapp.com/attachments/554447633197039627/595281754135199754/unknown.png

CSS:

.info { /* Background (div)*/
    background-color: red;
    height: 10em;
    width: 50em;
    position: absolute;
    left: 50%;
    top: 50%;
    margin:-5em 0 0 -25em;
    text-align: center;
}
.info-text { /* Text (span) */
    font-size: 6em;
    display: inline-block;
    vertical-align: middle;
}

You are required to post a [mcve] – Rob Jul 02 '19 at 13:10 — Rob, Jul 02 '19 at 13:10

Sai Manoj · Answer 1 · 2019-07-02T13:06:13.180

you can center vertical and horizontal using the below css

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

below is the working snippet

.parent {
  background: red;
  height: 100vh
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 23px;
  color: #fff
}

<div class="parent">
  <div class="center">Vertical and horizontal center</div>
</div>

Waldir Bolanos · Answer 2 · 2019-07-02T13:06:23.757

    .info { /* Background (div)*/
        background-color: red;
        height: 10em;
        width: 50em;
        position: relative;
    }
    .info-text { /* Text (span) */
        font-size: 6em;
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    <div class="info">
      <div class="info-text">Text</div>
    </div>

score 0 · Answer 3 · answered Jul 02 '19 at 13:05

u can use flex display to the parent with align-items:center and justify-content:space-between there is other methods but i prefer this one!

*{
  margin:0;
  padding:0;
}
.center-text{
  width:300px;
  height:150px;
  background:red;
  display:flex;
  align-items:center;
  justify-content:space-around;
}
p{
  font-size:30px;
}

<div class="center-text">
  <p>Hello World</p>
</div>

Vlad Racoare · Answer 4 · 2019-07-05T10:39:01.487

You don't need absolute positioning at all, just use flexbox to center horizontally and to align the text at the bottom of your container, use text-align:center and relative position for the text. With relative position you will be able to easily move it outside of the container with the bottom property

Example:

.info { /* Background (div)*/
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    background-color: red;
    height: 10em;
    width: 100%;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    z-index:99;
}
.info-text { /* Text (span) */
    font-size: 6em;
    position:relative;
    bottom:-0.5em;
}

<div class="info">
  <div class="info-text">Text</div>
</div>

You can set align-items:center if you want your text to be centered vertically too.

Example

.info { /* Background (div)*/
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    background-color: red;
    height: 10em;
    width: 100%;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99;
}
.info-text { /* Text (span) */
    font-size: 6em;
    position:relative;
}

<div class="info">
  <div class="info-text">Text</div>
</div>

This worked but now my div isn't centered vertically anymore: https://i.imgur.com/Khcmu4C.png — OfficialCRUGG, Jul 02 '19 at 16:19
@OfficialCRUGG Right! Sorry, I somehow missed the fact that you want your container to be vertically aligned. I have updated the answer above now. — Vlad Racoare, Jul 03 '19 at 11:29

score 0 · Answer 5 · answered Jul 02 '19 at 13:31

You can accomplish that by setting the line-height in .info-text with same height as is your .info

In your case, I've changed the unit to px and as you can see, .info has height: 100px; - from that I've added line-height: 100px; in .info-text

It will be in perfect center as long as you keep the line-height same as height.

.info { /* Background (div)*/
  background-color: red;
  height: 100px;
  width: 500px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -25px 0 0 -250px;
  text-align: center;
}

.info-text { /* Text (span) */
  position: relative;
  font-size: 60px;
  line-height: 100px;
  display: inline-block;
}

<div class="info">
  <span class="info-text">CRUGG</span>
</div>

Text not fully centered in Div?

5 Answers5