我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
当前回答
#outer { 显示: 网; justify- 内容: 中心; } <div id="outer"> <div id="inner">hello</div> </div> 在这里输入代码
其他回答
我已经应用了内线风格到内部 div. 使用此一个:
<div id="outer" style="width:100%">
<div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
</div>
一个非常简单的和跨浏览器的答案到水平中心是将这个规则应用到母元素:
.parentBox {
display: flex;
justify-content: center
}
试试这:
<div style="position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);"><div>Example</div></div>
我通常的方式是使用绝对的位置:
#inner{
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
}
外部迪夫不需要任何额外的属性来工作。
注意:我分享这个代码,因为谷歌带我到这个 Stack Overflow 解决方案,除了隐藏的元素没有任何宽度,直到它们显示后才可以重新测量/集中。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="inner" style="display:none;"> <form action=""> <table id="innerTable"> <tr><td> 姓名:</td><input type="text"></td> <tr><td> 电子邮件:</td><td><input type="text"></td>
