How to vertically center a div within a div with a background image

Question

I am simply trying to center my bg-text within the outer div, therefore having a picture in the background with the h1 tag in the center for all devices. I originally had this where the margin-top was a fixed pixel. I need it to be a percentage so it stays in the center. However, when i replaced the margin top with a percentage, as a minimize my screen the h1 element would slide upwards. I want it to stay margin-top: 50% of my background picture at all times.

HTML

  <div class= 'bg'>
      <div class='bg-text'>
        <h1>Text</h1>
      </div>
    </div>

CSS

.

.bg {
  display: table; 
  width: 100%;
  height: 50%;
  background-image: image-url('pic.jpg');
  background-attachment: scroll;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.bg-text{
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 12px rgba(0,0,0,0.5);
  margin-top: 150px;
}

.bg-text h1{
    font-size: 50px;
    font-weight: 700;
}

Possible duplicate of [Vertically center a div in a div](http://stackoverflow.com/questions/9307566/vertically-center-align-a-div-within-anothe-div?s=6|2.3735) and a host of others found by searching SO. — Rob, Dec 30 '16 at 16:59

Imran Saleem · Answer 1 · 2016-12-30T16:24:57.823

3

Use flex property for align the inner div in center

.bg {
  display: flex; 
  align-items:center;
  width: 100%;
  height: 300px;
  background-image: url('pic.jpg');
  background-attachment: scroll;
  background-color: red;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.bg-text{
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 12px rgba(0,0,0,0.5);
}

.bg-text h1{
    font-size: 50px;
    font-weight: 700;
}

have a look here https://jsfiddle.net/pteus556/

Supports in browsers.

edited Dec 30 '16 at 16:24

answered Dec 30 '16 at 16:12

Imran Saleem

370
4
20

1

Code-only answers are not very useful. Explain what you've done, why it works, whether it has browser limitations, etc. – random_user_name Dec 30 '16 at 16:14
@cale_b Thanks! I've never used align-items before. I see that it vertically aligns the element. How would I horizontally align it as well? – brandoncodes Dec 30 '16 at 17:03
use justify-content: center; property – Imran Saleem Dec 30 '16 at 17:25

score 1 · Answer 2 · answered Dec 30 '16 at 16:55

A second way to potential do that is to use transform: translateY(-50%);. Check out the fiddle for a little demo: https://jsfiddle.net/y58hu6tv/2/.

.bg {
    width: 100%;
    height: 500px;
    background-color: rgba(0, 0, 0, .7);
}

.bg-text {
   position: relative;
   top: 50%;
   margin: 0 auto;
   transform: translateY(-50%);
   text-align: center;
   background-color: rgba(255, 255, 255, .7);
}

Again though with this technique browser support is so-so.

Reference: http://caniuse.com/#feat=transforms2d

score 0 · Answer 3 · answered Dec 30 '16 at 17:26

Create a <div> with fixed dimensions and add your background to it.
Adjust the size of the <div> according to your needs.
Put your text inside that <div>
Position the text inside the <div> and give it position:absolute - in relation to its parent
Use the transformproperty as well as top / left / right / bottom

.mycontent {
  width: 100vw;
  max-width: 100%;
}
.mytext {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  background: rgba(255, 255, 255, .6);
  border: 1px solid #777;
  padding: .2em;
  color: #000;
}
.topcontent {
  height: 100vh;
  width: 2560px;
  max-width: 100%;
  background: url(http://supersocl.com/wp-content/uploads/2016/09/2560X1440-Wallpaper-Elegant-6G0.jpg);
  background-size: cover;
}
.othercontent {
  background: #010101;
  padding: 30px;
}
body {
  max-width: 100%;
  padding: 0;
  margin: 0 auto;
  color: #999;
}
p {
  margin: 0 auto;
  padding: 20px;
  text-align: justify;
  text-justify: inter-word;
}

<body>
  <div class="mycontent">
    <div class="topcontent">
      <span class="mytext">your text goes here</span>
    </div>
    <div class="othercontent">
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
        voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>

      <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
        ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>

      <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>

      <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
        assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et vo</p>
    </div>
  </div>
</body>

How to vertically center a div within a div with a background image

3 Answers3