我如何用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>
当前回答
有几种方法可以实现这一点:使用“flex”,“positioning”,“margin”等。
我推荐使用“Flex”
#outer {
display: flex;
justify-content: center;
align-items: center; /* if you also need vertical center */
}
使用地平线定位
#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
translate: transformX(-50%)
}
垂直和垂直,使用定位
#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
top: 50%;
translate: transform(-50%, -50%)
}
使用边界的垂直调整
#inner {
width: fit-content;
margin: 0 auto;
}
其他回答
Flexbox 中心 垂直和垂直 中心 调整一个元素
.wrapper {边界: 1px 固体 #678596; 最大宽度: 350px; 边界: 30px 自动;}.parentClass { 显示: flex; 定义内容:中心; 平衡元素:中心; 高度: 300px;}.parentClass div { 边界: 5px; 背景: #678596; 宽度: 50px; 线高度: 50px; 文本平衡:中心; 字体大小: 30px; 颜色: #fff;} <h1>Flexbox 中心 垂直和垂直 中心 平衡元素</h1> <h2>j
Flex 有超过97%的浏览器支持覆盖范围,可能是解决这些问题的最佳方式:
#outer {
display: flex;
justify-content: center;
}
设置宽度,并设置边缘向左和边缘向右到自动。 这是仅限于水平,但是. 如果你想要两种方式,你只会做这两种方式. 不要害怕尝试; 它不像你会打破任何东西。
好吧,我找到了一个可能适合所有情况的解决方案,但使用JavaScript:
这里是结构:
<div class="container">
<div class="content">Your content goes here!</div>
<div class="content">Your content goes here!</div>
<div class="content">Your content goes here!</div>
</div>
此分類上一篇: JavaScript snippet:
$(document).ready(function() {
$('.container .content').each( function() {
container = $(this).closest('.container');
content = $(this);
containerHeight = container.height();
contentHeight = content.height();
margin = (containerHeight - contentHeight) / 2;
content.css('margin-top', margin);
})
});
如果你想用它在一个响应性方法,你可以添加以下:
$(window).resize(function() {
$('.container .content').each( function() {
container = $(this).closest('.container');
content = $(this);
containerHeight = container.height();
contentHeight = content.height();
margin = (containerHeight - contentHeight) / 2;
content.css('margin-top', margin);
})
});
可以使用 CSS 3 Flexbox. 在使用 Flexbox 时,您有两种方法。
设置主显示:flex; 并将属性 {justify-content:center;,align-items:center;} 添加到您的主元素。
#outer { 显示: flex; justify-content: center; align-items: center; } <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>
设置父母显示:flex 并将 margin:auto 添加到孩子身上。
#outer { 显示: flex; } #inner { margin: auto; } <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>