在一个区域中居中两个绝对的<p>

Question

非常简单的问题，但我似乎找不到办法。 Jsfiddle：https://jsfiddle.net/agreyfield91/x72qhe15/4/

.textwrap {
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
 }

我尝试使用translate方法，但它没有用。

Answer 1

您希望绝对定位.textwrap并将position: relative添加到.container

＆＃13;

＆＃13;

.container {
  height: 300px;
  background-color: lightblue;
  position: relative;
}

.textwrap {
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  position: absolute;
}

＆＃13;

<section class="container">
  <div class="textwrap">
    <p>Center me</p>
    <p>Center me</p>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

您也可以使用flexbox。

＆＃13;

＆＃13;

.container {
    height: 300px;
    background-color: lightblue;
    display: flex;
    align-items: center;
    justify-content: center;
}
   

＆＃13;

<section class="container">
  <div class="textwrap">
    <p>Center me</p>
    <p>Center me</p>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;