将元素置于绝对定位的父级中

Question

不幸的是，我无法将元素置于position: absolute父级中心。

这是我的代码：

.cont-img {
  width:400px;
  position: relative;
}
.image {
  width:400px;
  height:400px;
  background:black;
}
.desc {
  position: absolute;
  top:0px;
  height:100%;
  width:100%;
  color:gold;
  display:table;
}
.centered-items {
  text-align:center;
  display:table-cell;
  vertical-align: middle;
}

<div class="cont-img">
  <div class="image">
    
  </div>
  <div class="desc">
    <div class="centered-items">
      <div class="item1">
        asdasd
      </div>
      <div class="item2">
        asdasd
      </div>
    </div>
  </div>
</div>

PS：我也尝试过flex方法，但遗憾的是它对我不起作用，因为flex会使元素不显示。

我只需要使这个绝对父元素下的元素垂直和水平居中。

Answer 1

CSS定位方法

对于使用绝对定位进行居中，有助于将transform与top和left偏移属性结合使用。您不需要vertical-align或表属性。

.cont-img {
    width: 400px;
    position: relative;
}
.image {
    width: 400px;
    height: 400px;
    background: black;
}
.desc {
    position: absolute;
    top: 0;  
    height: 100%;
    width: 100%;
    color: gold;
}
.centered-items {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);     /* 1 */
}

<div class="cont-img">
    <div class="image"></div>
    <div class="desc">
        <div class="centered-items">
            <div class="item1">asdasd</div>
            <div class="item2">asdasd</div>
        </div>
    </div>
</div>

注意：

1. 以下是对其工作原理的解释：Element will not stay centered, especially when re-sizing screen

CSS Flexbox方法

对于使用flexbox居中，这是一个例子：

.cont-img {
    width: 400px;
    position: relative;
}
.image {
    width: 400px;
    height: 400px;
    background: black;
}
.desc {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;             /* 2 */
    align-items: center;                 /* 2 */
    height: 100%;
    width: 100%;
    color: gold;
}

<div class="cont-img">
    <div class="image"></div>
    <div class="desc">
        <div class="centered-items">
            <div class="item1">asdasd</div>
            <div class="item2">asdasd</div>
        </div>
    </div>
</div>

注意：

1. 以下是对其工作原理的解释：https://stackoverflow.com/a/33049198/3597276

Answer 2

试试此代码

＆＃13;

＆＃13;

.cont-img {
  width:400px;
  position: relative;
}
.image {
  width:400px;
  height:200px;
  background:black;
  position:relative;
}
.desc {
  position: absolute;
  top:0px;
  height:100%;
  width:100%;
  color:gold;
  display:table;
}
.centered-items {
  text-align:center;
  display:table-cell;
  vertical-align: middle;
}

＆＃13;

<div class="cont-img">
  <div class="image">
  
  <div class="desc">
    <div class="centered-items">
      <div class="item1">
        asdasd
      </div>
      <div class="item2">
        asdasd
      </div>
    </div>
  </div>
    
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只要给下面的cont-img类赋予高度

.cont-img {
  width:400px;
  height:400px;
  position: relative;
}

Answer 4

添加高度：400px到.cont-img类。然后，您可以使用绝对位置和css转换来集中您的内容，如https://css-tricks.com/centering-percentage-widthheight-elements/中所示。

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

查看此JSfiddle了解更多信息。我还在小提琴中添加了display flex css，以防你改变主意。

有关css flexbox的更多信息，您可以访问https://css-tricks.com/snippets/css/a-guide-to-flexbox/