如何垂直对齐和水平对齐div？

Question

I have a video. And I have a group of text that I want to center vertically and horizontally on top of the video like this. https://imgur.com/a/zfldQ

Also I don't want to use the transform: translate method because I want to support IE8.

https://codepen.io/anon/pen/OjKxxj

<section class="container">

  <!-- Video -->
  <video src="https://static.videezy.com/system/resources/previews/000/000/108/original/Hiking.mp4"></video>


  <!-- Need to center this div -->
  <div class="center-group">
    <h1>Need to center this</h1>
    <h2>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello</h2>
    <a>Button</a>      
  </div>


</section>

* {
  margin: 0;
  padding: 0;
}

html, body, .container {
  height: 100%;
}

video {
  height: 100%;
  width: 100%;  
  object-fit: cover; 
}

.center-group {
  position: absolute;
  width: 500px;      
  top: 0;
  background: orange;
}

Answer 1

You can use position:absolute top and left for your center-group, Update your codepen.

.center-group {
  position: absolute;
  width: 500px;
  top: 30%;
  left:40%;
  background: orange;
}

Check this: https://codepen.io/bhansa/pen/oeKGQL

Answer 2

You can use display:

• flex (nowdays browsers)

 * { margin: 0; padding: 0; } html, body, .container { height: 100%; display: flex;/* update*/ align-items: center;/* update*/ justify-content: center;/* update*/ } video { position: absolute;/* update*/ top: 0;/* update*/ left: 0;/* update*/ height: 100%; width: 100%; object-fit: cover; } .center-group { position: relative;/* update*/ width: 500px; /*top: 0; update not needed */ background: orange; } 

 <section class="container"> <!-- Video --> <video autoplay src="https://static.videezy.com/system/resources/previews/000/000/108/original/Hiking.mp4"></video> <!-- Need to center this div --> <div class="center-group"> <h1>Need to center this</h1> <h2>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello</h2> <a>Button</a> </div> </section> 

• table/table-cell (nowdays and older browsers )

 * { margin: 0; padding: 0; } html { height: 100%; /*update*/ display: table; width: 100%; } body { display: table-row; } .container { display: table-cell; vertical-align: middle; text-align: center; } .center-group { display: inline-block; text-align: left; position: relative; /* end update*/ width: 500px; background: orange; } video { /*update*/ position: absolute; top: 0; left: 0; /* end update*/ height: 100%; width: 100%; object-fit: cover; } 

 <section class="container"> <!-- Video --> <video autoplay src="https://static.videezy.com/system/resources/previews/000/000/108/original/Hiking.mp4"></video> <!-- Need to center this div --> <div class="center-group"> <h1>Need to center this</h1> <h2>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello</h2> <a>Button</a> </div> </section> 

Answer 3

You need to add one more parent div and css to make it vertically and horizontally center

 * { margin: 0; padding: 0; } html, body, .container { height: 100%; } video { height: 100%; width: 100%; object-fit: cover; } .center-group { /* position: absolute; */ width: 500px; /* top: 0; left:0; */ background: orange; } .center-group-container{ position: absolute; top: 0; left:0; display:flex; justify-content:center; align-items:center; /* background:red; */ height:100%; width:100%; } 

 <section class="container"> <!-- Video --> <video autoplay src="https://static.videezy.com/system/resources/previews/000/000/108/original/Hiking.mp4"></video> <!-- Need to center this div --> <div class="center-group-container"> <div class="center-group"> <h1>Need to center this</h1> <h2>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello</h2> <a>Button</a> </div></div> </section> 

You need to add one parent div name .center-group-container

Changes in html css are as follows: HTML

      <!-- Need to center this div -->
  <div class="center-group-container">
  <div class="center-group">
    <h1>Need to center this</h1>
    <h2>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello</h2>
    <a>Button</a>      
    </div>
</div>

css

.center-group {
/*   position: absolute; */
  width: 500px;      
/*   top: 0;
  left:0; */
  background: orange;
}
.center-group-container{
    position: absolute;     
  top: 0;
  left:0;
  display:flex;
  justify-content:center;
  align-items:center;
/*   background:red; */
  height:100%;
  width:100%;
}