我如何用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>
当前回答
我通常的方式是使用绝对的位置:
#inner{
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
}
外部迪夫不需要任何额外的属性来工作。
其他回答
更新 2022 中央元素 垂直
1、使用 flexbox 垂直集中
要垂直集中一个像(div)这样的元素,需要将显示:flex 和正当内容:中心添加到元素 css 类。
<div class="center">
<h1>I'm Horizontally center</h1>
</div>
.center{
display:flex;
justify-content:center;
}
二、使用边界的水平集中
下面的例子表明如何使用边界和宽度以水平为中心的元素。
.center{
width:50%;
margin:0 auto;
}
在上面的代码中,添加了宽度:50%和边缘:0自动,以便元素在左边和右边边之间平等分配可用的空间。
3、使用转型视角
下面的例子表明如何使用位置和转换属性以水平为中心的元素。
.center{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
首先,添加位置:绝对,以便元素从正常文档流出。第二,我们添加左:50%,以便元素向前移动50%向x轴。第三,我们添加转换:translateX(-50%),以便元素向后返回50%并将其调整到中心。
这就是你想要的最短的方式。
JSFIDDLE
#outer {
margin - top: 100 px;
height: 500 px; /* you can set whatever you want */
border: 1 px solid# ccc;
}
#inner {
border: 1 px solid# f00;
position: relative;
top: 50 % ;
transform: translateY(-50 % );
}
我通常的方式是使用绝对的位置:
#inner{
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
}
外部迪夫不需要任何额外的属性来工作。
一些海报已经提到CSS 3的中心方式使用显示:盒子。
这个合成是过时的,不应该再使用。
因此,仅仅是为了完整性,这里是使用灵活盒子布局模块在CSS 3中集中最新的方式。
所以,如果你有简单的标签如:
<div class="box">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
</div>
...你想把你的物品集中在盒子内,这里是你需要的父母元素(.box):
.box {
display: flex;
flex-wrap: wrap; /* Optional. only if you want the items to wrap */
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}
.box { 显示: flex; flex-wrap: wrap; /* 可选. 只有如果您想要的物品将 wrap */ 定义内容: 中心; /* 为水平调整 */ 定义项目: 中心; /* 为垂直调整 */ } * { 边界: 0; 粘贴: 0; } html, 身体 { 高度: 100%; }.box { 高度: 200px; 显示: flex; flex-wrap: 定义内容: 中心; 定义项目: 定义内容: 定义内容: 定义内容: 定义内容: 定义内容: 定义内容: 定义内容: 定义内容: 定义内容: 定义内容: 定义内容: 定义内容: 定义内容: 定义内容: 定义内容: 定义内容
如果您需要支持使用 flexbox 的老式同步的老式浏览器,这里是一个很好的地方去看。
HTML:
<div id="outer">
<div id="inner">
</div>
</div>
CSS:
#outer{
width: 500px;
background-color: #000;
height: 500px
}
#inner{
background-color: #333;
margin: 0 auto;
width: 50%;
height: 250px;
}
菲德尔