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

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

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

当前回答

<!DOCTYPE html> <html> <head> <title>Center</title> <style>.outer{ 文本平衡:中心; }.inner{ 宽度: 500px; 边界: 0 自动; 背景: 棕色; 颜色: 红色; } </style> </head> <body> <div class="outer"> <div class="inner"> 此 DIV 是中心的</div> </div> </body>

请尝试一下,它将工作没有HTML中心标签。

2018-07-15 15:00:52

其他回答

您可以添加此代码:

#inner { 宽度: 90%; margin: 0 auto; text-align:center; } <div id="outer"> <div id="inner"> Foo foo</div> </div>

2017-08-04 15:08:49

您可以使用链接 https://plnkr.co/edit/MQD5QHJe5oUVKEvHCz8p?p=preview

.outer{
      display: table;
      width: 100%;
      height: 100%;
}
.inner {
    vertical-align: middle;
}

参考 https://v4-alpha.getbootstrap.com/例子/覆盖/

2017-07-26 09:29:50

我认为这将是一个解决方案:

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

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

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

2022-10-29 18:51:45

如果你有一个父母的某种高度说,身体{高度:200px} 或如下有父母 div#outer 高度200px,然后添加CSS内容如下

HTML:

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

CSS:

#outer{
  display: flex;
  width: 100%;
  height: 200px;
}
#centered {
  margin: auto;
}

然后,儿童内容,说 div#中心内容,将垂直或垂直中间,不使用任何位置的CSS。

#centered {
  margin: 0px auto;
}

或

#outer{
  display: flex;
  width: 100%;
  height: 200px;
}
#centered {
  margin: auto;
}

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

演示: https://jsfiddle.net/jinny/p3x5jb81/5/

只添加一个界限显示内部 div 不是 100% 默认:

#outer{ 显示: flex; 宽度: 100%; 高度: 200px; 边界: 1px 固体 #000000; } #centered { 边界: auto; 边界: 1px 固体 #000000; } <div id="outer"> <div id="centered"> Foo foo</div> </div>

DEMO: http://jsfiddle.net/jinny/p3x5jb81/9

2019-12-10 09:07:51

只需将此 CSS 内容添加到您的 CSS 文件中,它将自动集中内容。

垂直调整到CSS中中心:

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

垂直 + 垂直到中心在 CSS 中:

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

2020-01-06 06:44:18

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

推荐文章

最新文章

标签