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

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

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

当前回答

要在中间调整一个 div 中间的 div -

.outer{ 宽度: 300px; /* 例如 */ 高度: 300px; /* 例如 */ 背景: 红色; }.inner{ 位置: 相对; 顶部: 50%; 左: 50%; 转换: 翻译(-50%, -50%); 宽度: 200px; 高度: 200px; 背景: 黄色; } <body> <div class='outer'> <div class='inner'></div> </div> </body>

这将使中间的内部迪夫均匀,垂直和水平。

2020-06-22 13:35:31

其他回答

CSS

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

HTML

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

2017-01-18 07:16:19

首先:你需要给第二 Div 一个宽度:

例如:

HTML

<div id="outter">
    <div id="inner"Centered content">
    </div
</div>

CSS:

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

请注意,如果你不给它一个宽度,它将采取整个线的宽度。

2014-09-27 08:29:03

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

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

2015-12-23 09:39:26

我们可以使用Flexbox来实现这一点:

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

中心一个 div 内部一个 div 垂直:

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

此分類上一篇

中心一个DIV内部一个DIV垂直:

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

此分類上一篇

到完全中间的 div 垂直和垂直:

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

此分類上一篇

2019-07-12 18:09:27

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

margin: 0 auto; float: none;

2015-12-20 21:45:58

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

推荐文章

最新文章

标签