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

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

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

当前回答

#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

其他回答

注意:我分享这个代码,因为谷歌带我到这个 Stack Overflow 解决方案,除了隐藏的元素没有任何宽度,直到它们显示后才可以重新测量/集中。

2011-06-23 21:42:53

此分類上一篇: Margin:0px auto:

此分類上一篇: <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>

2017-02-20 13:16:12

另一个解决方案,而无需为其中一个元素设置宽度,是使用CSS 3转换属性。

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

技巧是,翻译X(-50%)将#内部元素置于其自己的宽度的左侧50%。

這裡有一個顯示水平和垂直調整的Fiddle。

更多信息可在Mozilla Developer Network上找到。

2015-03-12 14:01:38

更新 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%并将其调整到中心。

2022-12-21 05:09:33

最简单的方式之一......

<!DOCTYPE html>
<html>
    <head>
        <style>
            #outer-div {
                width: 100%;
                text-align: center;
                background-color: #000
            }
            #inner-div {
                display: inline-block;
                margin: 0 auto;
                padding: 3px;
                background-color: #888
            }
        </style>
    </head>

    <body>
       <div id ="outer-div" width="100%">
           <div id ="inner-div"> I am a easy horizontally centered div.</div>
       <div>
    </body>
</html>

2019-07-30 12:44:48

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

推荐文章

最新文章

标签