Question

我想将div放在页面的绝对中心，其中包括justify-content：center和align-items：center但是div必须是页面的100％宽度和高度才能位于绝对中心。

当您在div的顶部或底部添加元素时，问题就会到来，这会降低我们想要居中且不再位于绝对中心的div的高度。

这是https://jsfiddle.net/nybf8tjc/1页面我可以添加

.typewriter{margin-top: -41px;}

解决这个问题，但我觉得必须有一个更好的方法来做到这一点。

Answer 1

您可以将.typewriter设为一个绝对定位的元素，并添加常用的设置，以便将其定位，例如

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

行动中：https://jsfiddle.net/de3rf65j/

Answer 2

你可以通过使用它来简单地实现它。

＆＃13;

div.father {
  width: 100vw;
  height: 100vw;
  
  position: absolute;
  
  display: flex;
  align-items: center;
  justify-content: space-around;
 }
 
 div.father div.child {
  width: 400px;
  height: 250px;
  
  background-color: teal;
  
  position: relative;
  }

＆＃13;

<div class="father">
  <div class="child"></div> 
</div>

＆＃13;

您也可以使用transform属性：

＆＃13;

div.child {
  width: 400px;
  height: 250px;
  
  margin:0;
  padding: 0;
  
  
  background-color: teal;
  
  position: absolute;
  top: 50%;
  left: 50%;
  
  transform: translate(-50%, -50%);
}

＆＃13;

这应该使您想要的容器居中。看看https://css-tricks.com/snippets/css/a-guide-to-flexbox/

使用display flex将多个项目居中

2 个答案: