我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
当前回答
它也可以用绝对定位来垂直和垂直集中,如下:
#outer{
position: relative;
}
#inner{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
其他回答
我们可以使用下一个CSS的类,允许中心垂直和垂直对其父母的任何元素:
.centerElement{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
您可以使用显示器: flex 为您的外部 div 和到水平中心 您必须添加 justify 内容: 中心
#outer{
display: flex;
justify-content: center;
}
或者您可以参观w3schools - CSS flex Property 更多想法。
中心一个Div在一个Div
.outer { 显示: -webkit-flex; 显示: flex; //-webkit-justify-content: center; //justify-content: center; //align-items: center; width: 100%; height: 100px; background-color: lightgrey; }.inner { 背景颜色: cornflowerblue; padding: 2rem; margin: auto; //align-self: center; } <div class="outer"> <div class="inner"
根据您的情况,最简单的解决方案可能是:
margin: 0 auto; float: none;
我找到了类似的路径与边缘左,但它也可以留下。
#inner {
width: 100%;
max-width: 65px; /* To adapt to screen width. It can be whatever you want. */
left: 65px; /* This has to be approximately the same as the max-width. */
}