Center horizontally and vertically text in relative height div

Question

I want to center my text in a relative height div which contains an image. I use absolute position but when my text is on two lines, the text is not centered. I've already tried to use a table but it doesn't work due to the img .

HTML:

<div id="hubs">
  <h3>Nos Hubs</h3>
  <hr>
  <a class="thumbnail vignette-hub" href="http://kkw.fr">
    <img style="opacity: 0.6;filter: alpha(opacity=60);" alt="Aéroport de Nantes" src="http://kkw.fr/uploads/upload-center/nantes-vue-aerienne091501270208.png" width="100%" />
    <p class="txt-hub-image">
      Hub de</br>Nantes
    </p>
  </a>
</div>

CSS :

.txt-hub-image {
  z-index: 100;
  position: absolute;
  left: 0px;
  top: 50%;
  width: 100%;
  height: 100%;
  text-align: center;
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 16px;
}
.vignette-hub {
  position: relative;
  width: 25%;
  min-width: 135px;
}
.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: border .2s ease-in-out;
  -o-transition: border .2s ease-in-out;
  transition: border .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
  margin-right: auto;
  margin-left: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #337ab7;
}
.thumbnail .caption {
  padding: 9px;
  color: #333;
}

Do you have any ideas ?

Answer 1

There are a few changes required to your snippet to make it automatically work for all dimensions:

• p tags by default have a margin-top . If you don't reset it, then absolutely positioning it at 50% would become 50% + margin-top . This needs to be reset.
• When you absolutely position an element at top: 50% , the box gets positioned at 50% height of the container and text keeps getting added from that position on. So, to match the center of the text block with the center of the parent, you have to translate the box with the text up by 50% of its own size. This can be done by adding transform: translateY(-50%) .
• You don't need to add a height: 100% on the p tag and it can be removed.

Note: Using transform method for positioning needs CSS3 support but I assume this shouldn't be a problem because you are already using transition . If you want to support non CSS3 compatible browsers, have a look at the other approaches mentioned here . I have added a different answer just to explain the first two points I had mentioned above.

 .txt-hub-image { z-index: 100; position: absolute; left: 0px; top: 50%; width: 100%; text-align: center; text-decoration: none; color: white; font-weight: bold; font-size: 16px; /* added to fix the vertical centering */ margin-top: 0px; transform: translateY(-50%); } .vignette-hub { position: relative; width: 25%; min-width: 135px; } .thumbnail { display: block; padding: 4px; margin-bottom: 20px; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; -webkit-transition: border .2s ease-in-out; -o-transition: border .2s ease-in-out; transition: border .2s ease-in-out; } .thumbnail > img, .thumbnail a > img { margin-right: auto; margin-left: auto; } a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active { border-color: #337ab7; } .thumbnail .caption { padding: 9px; color: #333; } 

 <div id="hubs"> <h3>Nos Hubs</h3> <hr> <a class="thumbnail vignette-hub" href="http://kkw.fr"> <img style="opacity: 0.6;filter: alpha(opacity=60);" alt="Aéroport de Nantes" src="http://kkw.fr/uploads/upload-center/nantes-vue-aerienne091501270208.png" width="100%" /> <p class="txt-hub-image"> Hub de</br>Nantes </p> </a> </div> 

Here is a demo fiddle as the snippets feature seems to be down .

Answer 2

将.txt-hub-image类的最高值从50％更改为25％。