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

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

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

当前回答

与网

一个非常简单和现代的方式是使用显示器:网:

div { 边界: 1px dotted 灰色; } #outer { 显示: 网; 地点标题: 中心; 高度: 50px; /* 不需要 */ } <!DOCTYPE html> <html> <head> </head> <body> <div id="outer"> <div> Foo foo</div> </div> </body> </html>

2020-07-27 21:10:48

其他回答

#inter { 边界: 0.05em 固体黑色; } #outer { 边界: 0.05em 固体红色; 宽度:100%; 显示: flex; justify-content: center; } <div id="outer"> <div id="inner"> Foo foo</div> </div>

其他解决方案

您可以将此 CSS 应用到内部 <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

当然,你不需要设置宽度为50%,任何宽度低于含有<div>的将工作。

如果您正在针对 Internet Explorer 8 (及以后),可能更好地拥有此相反:

#inner {
  display: table;
  margin: 0 auto;
}

它将使内部元素的中心垂直,它工作而不设置特定的宽度。

工作例子在这里:

2008-09-22 12:29:07

根据您的情况,最简单的解决方案可能是:

margin: 0 auto; float: none;

2015-12-20 21:45:58

最简单的答案: 添加边界:自动; 到内部。

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

CSS 代码

.outer{
    width: 100%;
    height: 300px;
    background: yellow;
}

.inner{
    width: 30%;
    height: 200px;
    margin: auto;
    background: red;
    text-align: center
}

查看我的 CodePen 链接: http://codepen.io/feizel/pen/QdJJrK

此分類上一篇

2017-02-11 08:11:15

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

.HTML

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

饰 CSS

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

2021-04-16 21:55:15

<div id="outer" style="width:100%">  
  <div id="inner" style="text-align:center">Foo foo</div>
</div>

2017-01-31 07:45:32

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

推荐文章

最新文章

标签