它没有正确垂直居中

Question

我想将段落放在div＆＃34; box＆＃34;中，但是竖线没有正确居中。

＆＃13;

＆＃13;

.container {
  position: relative;
}
p {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
}
.box {
  width: 100%;
  height: 120px;
  background-color: #62a6c9;
}

＆＃13;

<div class="container">
  <div class="box"></div>
  <p>center</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将transform:translateY(-50%); margin:0;添加到p以使其垂直居中

.container {
       position: relative;
}

p {
       position: absolute;
       left: 0;
       top: 50%;
       width: 100%;
       text-align: center;
  transform:translateY(-50%);
  margin:0;
}

.box {
       width: 100%;
       height: 120px;
       background-color: #62a6c9;
}

<div class="container">
        <div class="box"></div>
        <p>center</p>
    </div>

Answer 2

你应该改变你的方法，用作下推边距的元素.box是完全没必要的，段p是我们想要保留的元素.container的中间应该在其边距上重置，.container应该有一个固定的高度。

最后，使用flex-boxes：

.container {
  height: 200px;
  background: orange;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.container p {
  margin: 0;
  background: cyan;
}

.container img {
  width: 100px;
  height: auto;
}

.wrapper {
  padding-left: 20px;
}

<div class="container">
  <img src="http://flaviusso.altervista.org/blog/wp-content/uploads/2013/11/html-css.jpg" alt="http://flaviusso.altervista.org/blog/wp-content/uploads/2013/11/html-css.jpg" />
  <p>Hello World</p>
  
  <div class="wrapper">
    
  <img src="http://flaviusso.altervista.org/blog/wp-content/uploads/2013/11/html-css.jpg" alt="http://flaviusso.altervista.org/blog/wp-content/uploads/2013/11/html-css.jpg" />
  <p>Hello World</p>
  </div>
</div>

Answer 3

请注意，您的p目前不在.box内。 您可以创建虚假table，将display: table添加到父级，将display: table-cell添加到子级。

.container {
  position: relative;
}
p {
  display: table-cell;
  margin: 0;
  vertical-align: middle;
}
.box {
  background-color: #62a6c9;
  display: table;
  height: 120px;
  text-align: center;
  width: 100%;
}

<div class="container">
  <div class="box">
    <p>center</p>
  </div>
</div>