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

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

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

当前回答

使用下面的 CSS 内容为 #inner div:

#inner {
  width: 50%;
  margin-left: 25%;
}

我主要使用这个CSS内容为中心Divs。

其他回答

有几种方法可以实现这一点:使用“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;
}

#outer{
  display: flex;
  width: 100%;
  height: 200px;
  justify-content:center;
  align-items:center;
}

更新 2022 中央元素垂直

1、使用 flexbox 垂直集中

要垂直集中一个像(div)这样的元素,需要将显示:flex 和正当内容:中心添加到元素 css 类。

<div class="center">
   <h1>I'm Horizontally center</h1>
</div>

.center{
   display:flex;
   justify-content:center;
}

二、使用边界的水平集中

下面的例子表明如何使用边界和宽度以水平为中心的元素。

.center{
    width:50%;
    margin:0 auto;
}

在上面的代码中,添加了宽度:50%和边缘:0自动,以便元素在左边和右边边之间平等分配可用的空间。

3、使用转型视角

下面的例子表明如何使用位置和转换属性以水平为中心的元素。

.center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

首先,添加位置:绝对,以便元素从正常文档流出。第二,我们添加左:50%,以便元素向前移动50%向x轴。第三,我们添加转换:translateX(-50%),以便元素向后返回50%并将其调整到中心。

CSS 定义内容属性

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

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

我已经看到很多和很多答案,他们都是过时的,谷歌已经实施了一个解决这个常见的问题,它将对象的中心字面上在中间,无论发生什么,是的,它是响应性的。

.HTML

...
<div class="parent">
   <form> ... </form>
   <div> ... </div>
</div>

饰 CSS

.parent {
   display: grid;
   place-items: center;
}

推荐文章