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

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

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

当前回答

#outer { 顯示: flex; align 項目: center; } <div id="outer"> <div id="inner"> Foo foo</div> </div>

這應該是你的孩子或 #內部 div 地平線. 但你實際上看不到任何變化. 因為我們的 #外部 div 沒有高度,或者說,它的高度是自動設定的,所以它有相同的高度的所有兒童元素。

#outer { 高度: 500px; 显示: flex; 匹配元素: 中心; 背景颜色: 蓝色; } #inner { 高度: 100px; 背景: 黄色; } <div id="outer"> <div id="inner"> Foo foo</div> </div>

2018-09-10 23:06:24

其他回答

更新 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

让它简单!

#outer { 显示: flex; justify-content: center; } <div id="outer"> <div id="inner"> Foo foo</div> </div>

2019-03-26 15:27:12

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

<!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

中心的主要属性是边界:自动和宽度:根据要求:

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}

2018-01-25 07:09:19

您可以使用显示器: flex 为您的外部 div 和到水平中心您必须添加 justify 内容: 中心

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

或者您可以参观w3schools - CSS flex Property 更多想法。

2018-06-10 15:53:54

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

推荐文章

最新文章

标签