How to center vertically and horizontally text in a div element

Question

I want to center text above an image in an div element.

This is what i tried:

CSS:

    .container {
  margin: 0 auto;
  max-width: 1200;
}
.header {
    width: 100%;
}
.ring {
    max-width: 100%;
    position: relative;

}
.flex_text  {
    position: absolute;
    color: #B64547;
    z-index: 100;
    font-family: Poppins;
    font-size: 30px;
    text-align: center;
}


.cell img {
    display: block;
}

Html:

<div class="container">
    <div class="grid">
        <div class="cell">
            <h4 class="flex_text">Brewing, get started!</h4>
            <img src="img/Kaffe_1.jpg" alt="Ring1" class="ring">
        </div>

It did not work, obviously. The website is responsive, so the solution should work responsive aswell.

I looked around and tried a lot of different things but they didn't work. I don't know, but maybe there's a solution with jquery? Thanks :)

[Centering in CSS](https://css-tricks.com/centering-css-complete-guide/) — empiric, Jan 26 '17 at 19:03
// grab our divs var flex_text = $('.flex_text'); var container = $('.container'); // find half of the width difference between child and parent var left = (container.width() - flex_text.width()) / 2; // add the current left position of the parent and set the left css value left += container.offset().left; flex_text.css('left', left); // do the same for top position var top = (container.height() - flex_text.height()) / 2; top += container.offset().top; flex_text.css('top', toppy); — omikes, Jan 26 '17 at 19:18

score 1 · Accepted Answer · answered Jan 26 '17 at 19:05

position: relative; and display: inline-block; (or you can float it) on the parent element so it will draw a relatively positioned square around the image, then top: 50%; transform: translateY(-50%); left: 0; right: 0; to center the text.

    .container {
  margin: 0 auto;
  max-width: 1200;
}
.header {
    width: 100%;
}
.ring {
    max-width: 100%;
    position: relative;

}
.cell {
  position: relative;
  display: inline-block;
}
.flex_text  {
    position: absolute;
    color: #B64547;
    z-index: 100;
    font-family: Poppins;
    font-size: 30px;
    text-align: center;
  top: 50%;
  margin: 0;
  left: 0; right: 0;
  transform: translateY(-50%);
}


.cell img {
    display: block;
}

<div class="container">
    <div class="grid">
        <div class="cell">
            <h4 class="flex_text">Brewing, get started!</h4>
            <img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="Ring1" class="ring">
        </div>

Thank you! This is working very well! I don't understand the transfrom:translateY(-50%) property yet but, I just got started with webdesign so I'll learn it ;) — Janos, Jan 26 '17 at 19:18
@Janos awesome, you're welcome. that shifts an element up 50% of it's own height. — Michael Coker, Jan 26 '17 at 19:19

score 1 · Answer 2 · edited Apr 22 '23 at 08:23

You can consider using flex here.

Check this snippet:

.grid {
  position: relative;
}
.cell {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex_text {
  position: absolute;
  color: red;
}
.cell img {}

<div class="container">
  <div class="grid">
    <div class="cell">
      <h4 class="flex_text">Brewing, get started!</h4>
      <img src="http://www.planwallpaper.com/static/images/9-credit-1.jpg" width=200px height=200px alt="Ring1" class="ring">
    </div>
  </div>
</div>

How to center vertically and horizontally text in a div element

2 Answers2