Vertically Center Text Over Background Div

Question

I have a responsive background image that I want to vertically center text over. I have tried setting the line height and container height to be equal and absolute positioning top:50% however it doesn't work. I also want the text to stay centered when I change the window size. This is as far as I have gotten. Can anyone help please.

<!DOCTYPE html>
<html>
 <head>
  <title>Vertical Center Text</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="description" content="Vertically Center Text">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
   html, body
   {
    margin: 0;
    padding: 0;
   }
   .box
   {
    width: 100%;
    height: 700px;
    background-color: #1F3AC5;
    color: #fff;
    float: left;
   }
   .page-container
   {
    width: 992px;
    margin: 0 auto;
   }
   .text1
   {
    float: left;
    color: #fff; 
    background-color: rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    font-size: 20px;
    padding: 20px;
    line-height: 25px;
   }
   .text2
   {
    clear: both;
    float: left;
    color: #fff; 
    text-shadow: 2px 2px 4px #000000;
    font-size: 60px;
    line-height: 65px;
   }
   /*mobile*/
   @media only screen and (max-width: 1200px)
   {
    .box
    {
     min-height: 475px;
     height: calc(100vw / 1.714);
    }
   }
   @media only screen and (max-width: 992px)
   {
    .box
    {
     height: 475px;
    }
    .text1
    {
     font-size: 16px;
     margin: 0 20px;
    }
    .text2
    {
     font-size: 40px;
     margin: 0 20px;
    }
   }
  </style>
 </head>
 <body>
  <div class="box">
   <div class="page-container">
    <div class="text1">Hello World</div>
    <div class="text2">How are you?</div>
   </div>
        </div>
 </body>
</html>

so you want both text1 and text2 in centre? and align vertically or horizontally? — Deepak Sharma, Sep 07 '18 at 03:21
Yes. i want text1 and text2 to be centered vertically, even when I resize the window and the background. — Magearlik, Sep 07 '18 at 03:34

score 0 · Answer 1 · answered Sep 07 '18 at 03:56

Ok I solved this by displaying the box as a table and the box-container as a table-cell and using vertical-align:middle. Answer here:

<!DOCTYPE html>
<html>
 <head>
  <title>Vertical Center Text</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="description" content="Vertically Center Text">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
   html, body
   {
    margin: 0;
    padding: 0;
   }
   .box
   {
    width: 100%;
    height: 700px;
    background-color: #1F3AC5;
    color: #fff;
    float: left;
    display: table;
   }
   .box-container
   {
    display: table-cell;
    vertical-align: middle;
   }
   .page-container
   {
    width: 992px;
    margin: 0 auto;
   }
   .text1
   {
    position: relative;
    float: left;
    color: #fff; 
    background-color: rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    font-size: 20px;
    padding: 20px;
    line-height: 25px;
   }
   .text2
   {
    clear: both;
    float: left;
    color: #fff; 
    text-shadow: 2px 2px 4px #000000;
    font-size: 60px;
    line-height: 65px;
   }
   /*mobile*/
   @media only screen and (max-width: 1200px)
   {
    .box
    {
     min-height: 475px;
     height: calc(100vw / 1.714);
    }
   }
   @media only screen and (max-width: 992px)
   {
    .box
    {
     height: 475px;
    }
    .text1
    {
     font-size: 16px;
     margin: 0 20px;
    }
    .text2
    {
     font-size: 40px;
     margin: 0 20px;
    }
   }
  </style>
 </head>
 <body>
  <div class="box">
   <div class="box-container">
    <div class="page-container">
     <div class="text1">Hello World</div>
     <div class="text2">How are you?</div>
    </div>
   </div>
        </div>
 </body>
</html>

I think that an easier approach would be to just set the `.box` class to have: `display: flex; align-items: center;`. — Luiz Carlos, Sep 07 '18 at 03:59

score 0 · Accepted Answer · answered Sep 07 '18 at 05:05

I have documented the changes in CSS. Flexbox is used to position the page-container in the center. All floats are removed to keep the document flow intact.

More information on flexbox here.

html,
body {
  margin: 0;
  padding: 0;
}

.box {
  width: 100%;
  height: 700px;
  background-color: #1F3AC5;
  color: #fff;
  /* float: left; REMOVED */
  display: flex; /* Added */
  align-items: center; /* Center vertically */
}

.page-container {
  width: 992px;
  margin: 0 auto;
}

.text1 {
  /* float: left; REMOVED */
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  font-size: 20px;
  padding: 20px;
  line-height: 25px;
}

.text2 {
  /* clear: both;
  float: left; REMOVED */
  color: #fff;
  text-shadow: 2px 2px 4px #000000;
  font-size: 60px;
  line-height: 65px;
}


/*mobile*/

@media only screen and (max-width: 1200px) {
  .box {
    min-height: 475px;
    height: calc(100vw / 1.714);
  }
}

@media only screen and (max-width: 992px) {
  .box {
    height: 475px;
  }
  .text1 {
    font-size: 16px;
    margin: 0 20px;
  }
  .text2 {
    font-size: 40px;
    margin: 0 20px;
  }
}

<div class="box">
  <div class="page-container">
    <div class="text1">Hello World</div>
    <div class="text2">How are you?</div>
  </div>
</div>

Vertically Center Text Over Background Div

2 Answers2