我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</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%));
其他回答
一个非常简单的和跨浏览器的答案到水平中心是将这个规则应用到母元素:
.parentBox {
display: flex;
justify-content: center
}
此分類上一篇: <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>
<html>
*{ margin: 0; padding: 0; } #outer{ 背景: 红色; 宽度: 100%; 高度: 100vh; 显示: flex; /*center 垂直*/ 正当内容: 中心; flex 方向: 列; /*center 垂直*/ 匹配元素: 中心; } #inner{ 宽度: 80%; 高度: 40px; 背景: g
<div id="outer">
<div id="inner">Foo foo</div>
</div>
#outer{
display:flex;
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!
