我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
当前回答
您可以使用显示器: flex 为您的外部 div 和到水平中心 您必须添加 justify 内容: 中心
#outer{
display: flex;
justify-content: center;
}
或者您可以参观w3schools - CSS flex Property 更多想法。
其他回答
CSS 3的盒子相匹配属性
#outer {
width: 100%;
height: 100%;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
#inner {
width: 50%;
margin: 0 auto;
}
最熟悉的方式,它是广泛使用和工作在许多浏览器,包括旧的,是使用边界如下:
#parent { 宽度: 100%; 背景颜色: #CCCCCC; } #child { 宽度: 30%; /* 我们需要宽度 */ 边缘: 0 自动; /* 这是魔法 */ 颜色: #FFFFFF; 背景颜色: #000000; 粘贴: 10px; 文本平衡: 中心; } <div id="parent"> <div id="child"> 我是孩子,我是水平中心! 我的爸爸是一个灰色的 div dude!</div> </div>
运行代码以查看它是如何工作的. 此外,有两个重要的事情你不应该忘记在你的CSS,当你试图以这种方式集中: 边缘: 0 自动;. 这使它是 div 中心,如你想要的。
使用 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!
注意:我分享这个代码,因为谷歌带我到这个 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>
