代码之家 › 专栏 › 技术社区 › M. GR.

使用display flex[复制]将多个项目居中

centering flexbox css html

M. GR. · 技术社区 · 7 年前

我想用justify content:center和align items:center将div居中在页面的绝对中心,但div必须是页面的100%宽度和高度才能处于绝对中心。

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

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

为了解决这个问题,但我觉得一定有更好的方法。

2 回复 | 直到 7 年前

Johannes 7 年前

你可以 .typewriter 一个绝对定位的元素,并添加常用的居中设置,如

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

实际操作: https://jsfiddle.net/de3rf65j/

user4923217 user4923217 7 年前

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;
  }

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

您也可以使用 transform 属性:

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

https://css-tricks.com/snippets/css/a-guide-to-flexbox/