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

Question

我有一个视频。我有一组文本，我希望像这样垂直和水平地居中在视频的顶部。 https://imgur.com/a/zfldQ

另外，我不想使用transform：translate方法，因为我想支持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

您可以使用position:absolute 顶部和左作为您的中心组，更新您的代码集。

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

请检查：https://codepen.io/bhansa/pen/oeKGQL

Answer 2

您可以使用display：

• flex （现在的浏览器）

* {
  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 （现在和旧版浏览器）

* {
  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

您需要再添加一个父div和css，使其垂直和水平居中

＆＃13;

＆＃13;

* {
  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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

您需要添加一个父div名称.center-group-container

  

html css的变化如下：   的 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%;
}