Question

正如标题所示，我试图水平和垂直居中一个绝对定位的元素。根据我发现的其他帖子，Here是我的尝试的掠夺者。目标是让红色ALERT文本在概述框中居中。

这是CSS：

cout << numm

Answer 1

一些事情：对于要居中的东西，父容器需要才能拥有高度。是由其他内容创建的高度，还是仅仅是预定义的高度。我已移除您的.parent，您会看到.child实际上位于容器内部。您的容器还需要相对位置（或static以外的任何位置属性），因此绝对居中与该元素相关。

最后，我们可以使用一种简单的技术，通过向前移动50％，向下移动50％，然后向后移动宽度和高度的一半来使盒子居中。后退使用翻译：

.container {
  border: 1px solid black;
  // We need the container we want to center in to have a positioned value
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

<div class="container">
  <div class="child">ALERT</div>
  <p>Item here</p>
  <p>Item here</p>
  <p>Item here</p>
  <p>Item here</p>
  <p>Item here</p>
  <p>Item here</p>
  <p>Item here</p>
  <p>Item here</p>
</div>

Answer 2

尝试将父级定位为绝对（您必须设置高度）：

JSFiddle

.container {
    position: relative;
    border: 1px solid black;
}

.parent {
    position: absolute;
    bottom: 0;
    color: red;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 16px;
    margin: auto;
    text-align: center;
}

Answer 3

Html的一个巧妙之处在于，您可以使用百分位数而不是像素来描述相对性。例如：

而不是使用：

bottom: 250px;

你可以使用类似的东西：

right: 43%;

将其与计算出的比例一起使用，例如：

top:45%
bottom: 45%;

并将文字高度设置为10％，您可以将任何内容放在中心位置。

根据您的代码判断您已经熟悉“自动”，所以我会为您节省那首歌曲和舞蹈。

水平和垂直居中绝对定位元素

3 个答案: