怎样才能垂直集中一个元素?

我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

当前回答

CSS 定义内容属性

它将Flexbox元件调整到容器的中心:

#outer {
    display: flex;
    justify-content: center;
}

其他回答

试着和周围玩

margin: 0 auto;

如果你也想集中你的文本,试着使用:

text-align: center;

是的,这是一个短暂而干净的水平调整代码。

.classname {
   display: box;
   margin: 0 auto;
   width: 500px /* Width set as per your requirement. */;
}

有几种方法可以实现这一点:使用“flex”,“positioning”,“margin”等。

我推荐使用“Flex”

#outer {
   display: flex;
   justify-content: center;
   align-items: center;  /* if you also need vertical center */
}

使用地平线定位

#outer {
  position: relative;
}
#inner {
  position: absolute;
  left: 50%;
  translate: transformX(-50%)
}

垂直和垂直,使用定位

#outer {
  position: relative;
}
#inner {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: transform(-50%, -50%)
}

使用边界的垂直调整

#inner {
 width: fit-content;
 margin: 0 auto;
}

添加文本:中心;到 parent div

#outer {
    text-align: center;
}

HTTPS://jsfiddle.net/7qwxx9rs/

或

#outer > div {
    margin: auto;
    width: 100px;
}

HTTPS://jsfiddle.net/f8su1fLz/

我最近找到了一个方法:

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

两个元素必须是相同的宽度,以便正常运作。

推荐文章