我如何用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>
当前回答
我找到了类似的路径与边缘左,但它也可以留下。
#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. */
}
其他回答
如果你不想在内部DIV上设置固定宽度,你可以做这样的事情:
#outer { 宽度: 100%; 文本顺序:中心; } #inner { 显示: inline-block; } <div id="outer"> <div id="inner"> Foo foo</div> </div>
这使得内部的DIV变成一个可以与文本平行集中的内线元素。
中心一个元素,不需要动态高度和宽度的旋转器/父母
没有副作用:它不会限制一个集中元素的宽度低于视门宽度,当使用Flexbox中的边缘在一个集中元素内
position: fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%));
垂直 + 垂直中心,如果其高度与宽度相同:
position: fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));
最简单的方式:
#outer { 宽度: 100%; 文本平衡:中心; } #inner { 边缘:自动; 宽度: 200px; } <div id="outer"> <div id="inner">Blabla</div> </div>
如果有人想要一个 jQuery 解决方案的中心调整这些 divs:
$(window).bind("load", function() {
var wwidth = $("#outer").width();
var width = $('#inner').width();
$('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;");
});
集中一个未知的高度和宽度的DIV
它与合理的现代浏览器(Firefox,Safari/WebKit,Chrome,Internet & Explorer & 10,Opera等)工作。
.content { 位置: 绝对; 左: 50%; 顶: 50%; 转换: 翻译(-50%, -50%); } <div class="content"> 这与任何内容工作</div>
在 Codepen 或 JSBin 上加入它。