我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
当前回答
您可以使用显示器: flex 为您的外部 div 和到水平中心 您必须添加 justify 内容: 中心
#outer{
display: flex;
justify-content: center;
}
或者您可以参观w3schools - CSS flex Property 更多想法。
其他回答
这就是你想要的最短的方式。
JSFIDDLE
#outer {
margin - top: 100 px;
height: 500 px; /* you can set whatever you want */
border: 1 px solid# ccc;
}
#inner {
border: 1 px solid# f00;
position: relative;
top: 50 % ;
transform: translateY(-50 % );
}
设置宽度,并设置边缘向左和边缘向右到自动。 这是仅限于水平,但是. 如果你想要两种方式,你只会做这两种方式. 不要害怕尝试; 它不像你会打破任何东西。
如果您不想设置固定宽,并且不需要额外的边界,则将显示器添加到您的元素中: inline-block。
你可以使用:
#element {
display: table;
margin: 0 auto;
}
此分類上一篇: <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>
button {
margin: 0 auto;
width: fit-content;
display: block;
}
// container should have set width (for example 100%)
