我如何用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>
当前回答
<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;
}
其他回答
CSS 3的盒子相匹配属性
#outer {
width: 100%;
height: 100%;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
中心一个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"
如果你不想在内部DIV上设置固定宽度,你可以做这样的事情:
#outer { 宽度: 100%; 文本顺序:中心; } #inner { 显示: inline-block; } <div id="outer"> <div id="inner"> Foo foo</div> </div>
这使得内部的DIV变成一个可以与文本平行集中的内线元素。
我已经应用了内线风格到内部 div. 使用此一个:
<div id="outer" style="width:100%">
<div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
</div>
#centered { 位置: 绝对; 左: 50%; 边缘左: -100px; } <div id="outer" style="width:200px"> <div id="centered"> Foo foo</div> </div>
确保母元素定位,即相对、固定、绝对或粘贴。
如果你不知道你的 div 的宽度,你可以使用 transform:translateX(-50%);而不是负面边界。
使用 CSS calc(),代码可以变得更简单:
.centered {
width: 200px;
position: absolute;
left: calc(50% - 100px);
}
原则仍然是相同的;把项目放在中间,并补偿宽度。