我如何用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>
当前回答
您可以使用链接 https://plnkr.co/edit/MQD5QHJe5oUVKEvHCz8p?p=preview
.outer{
display: table;
width: 100%;
height: 100%;
}
.inner {
vertical-align: middle;
}
参考 https://v4-alpha.getbootstrap.com/例子/覆盖/
其他回答
将 CSS 添加到您的内部 div. 设置边界: 0 自动,并设置其宽度低于 100%,这是外部 div 的宽度。
<div id="outer" style="width:100%">
<div id="inner" style="margin:0 auto;width:50%">Foo foo</div>
</div>
这将带来所需的结果。
最簡單的方式之一是使用顯示器: flex. 外部 div 只需要顯示器 flex, 內部需要範圍: 0 auto 以使其以水平為中心。
要垂直集中,只需在另一个Div中集中一个Div,请查看下面的.inter 类评论。
.wrapper { 显示: flex; /* 添加我们想要的任何高度和宽度 */ 高度: 300px; 宽度: 300px; /* 只是这样你可以看到它是中心 */ 背景: peachpuff; }.inner { /* 中心 水平 */ 边界: 0 自动; /* 中心 垂直 * /* 边界: 0 自动; * /* 中心 * / * 边界: 0 自动; * / } <div class="wrapper"> <div class="inner"> 我是 ho
只需将此 CSS 内容添加到您的 CSS 文件中,它将自动集中内容。
垂直调整到CSS中中心:
#outer {
display: flex;
justify-content: center;
}
垂直 + 垂直到中心在 CSS 中:
#outer {
display: flex;
justify-content: center;
align-items: center;
}
使用 Sass (SCSS合成) 你可以用混合物做到这一点:
与翻译
// Center horizontal mixin
@mixin center-horizontally {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
}
// Center horizontal class
.center-horizontally {
@include center-horizontally;
}
在HTML标签中:
<div class="center-horizontally">
I'm centered!
</div>
请记住添加位置:相对;到母 HTML 元素。
与Flexbox
使用Flex,你可以这样做:
@mixin center-horizontally {
display: flex;
justify-content: center;
}
// Center horizontal class
.center-horizontally {
@include center-horizontally;
}
在HTML标签中:
<div class="center-horizontally">
<div>I'm centered!</div>
</div>
试试这个CodePen!
#outer{
display: flex;
width: 100%;
height: 200px;
justify-content:center;
align-items:center;
}