我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
当前回答
#outer{
display: flex;
width: 100%;
height: 200px;
justify-content:center;
align-items:center;
}
其他回答
在我的情况下,我需要在一个按钮下中心(在屏幕上)一个下载菜单(使用 flexbox 为它的项目),可以有不同的位置垂直。
#outer { margin: auto; left: 0; right: 0; position: fixed; } #inner { text-align: center; } <div id="outer"> <div id="inner">Foo foo</div> </div>
上面的代码使下载始终集中在屏幕上的所有尺寸的设备,无论下载按钮在哪里垂直。
这对我工作:
#inner {
position: absolute;
margin: 0 auto;
left: 0;
width: 7%;
right: 0;
}
在此代码中,您将确定元素的宽度。
此分類上一篇: <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>
最简单的方式之一......
<!DOCTYPE html>
<html>
<head>
<style>
#outer-div {
width: 100%;
text-align: center;
background-color: #000
}
#inner-div {
display: inline-block;
margin: 0 auto;
padding: 3px;
background-color: #888
}
</style>
</head>
<body>
<div id ="outer-div" width="100%">
<div id ="inner-div"> I am a easy horizontally centered div.</div>
<div>
</body>
</html>
您可以使用 Flexbox 如下:
#outer { 显示: flex; justify-content: center } <div id="outer"> <div id="inner"> Foo foo</div> </div>
适用于所有浏览器支持的 Autoprefixer:
#outer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
或其他
使用转换:
#inner { 位置:绝对; 左: 50%; transform:翻译(-50%) } <div id="outer"> <div id="inner"> Foo foo</div> </div>
使用 Autoprefixer:
#inner {
position: absolute;
left: 50%;
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
transform: translate(-50%)
}
