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

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

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

当前回答

这将你的内心分散为垂直和垂直:

#outer{
    display: flex;
}
#inner{
    margin: auto;
}

只有垂直调整,变化

margin: 0 auto;

垂直,变化。

margin: auto 0;

2018-03-15 18:18:19

其他回答

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

2019-05-29 13:17:41

<div class="container">
<div class="res-banner">
<img class="imgmelk"  src="~/File/opt_img.jpg" >
</div>
</div>

CSS 代码

.res-banner{
        width:309px;
        margin: auto;
        height:309px;
    }

2022-05-14 07:21:58

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

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

我们可以使用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

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

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

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

2018-06-10 15:53:54

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

推荐文章

最新文章

标签