我如何用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>
当前回答
1. 中心一个区块级元素使用自动为水平边界
二、中心区块级元素,使用垂直边缘的卡尔克
.outer { 位置: 相对; 宽度: 300px; 高度: 180px; 背景颜色: rgb(255, 0, 0); }.inner { 位置: 绝对; 左: 50%; 宽度: 150px; 高度: 180px; 背景颜色: rgb(255, 255, 0); transform: translateX(-75px); } <div class="outer"> <div class="inner"></div> </div>
7、使用显示器中心一个元素:桌面、板块和盒子
8. 使用显示器中心一个元素: flex 和 justify 内容: 中心
.outer { 显示: 网络; 正当标题: 中间; 宽度: 300px; 高度: 180px; 背景颜色: rgb(255, 0, 0); }.inner { 宽度: 150px; 背景颜色: rgb(255, 255, 0); } <div class="outer"> <div class="inner"></div> </div>
其他回答
Flex 有超过97%的浏览器支持覆盖范围,可能是解决这些问题的最佳方式:
#outer {
display: flex;
justify-content: center;
}
#outer {postion: relative}
#inner {
width: 100px;
height: 40px;
position: absolute;
top: 50%;
margin-top: -20px; /* Half of your height */
}
而不是多种包装和/或自动边缘,这个简单的解决方案对我来说工作:
<div style="top: 50%; left: 50%;
height: 100px; width: 100px;
margin-top: -50px; margin-left: -50px;
background: url('lib/loading.gif') no-repeat center #fff;
text-align: center;
position: fixed; z-index: 9002;">Loading...</div>
它将Div放在视图(垂直和水平)的中心,尺寸和调整尺寸,中心背景图像(垂直和水平),中心文本(水平),并保持Div在视图和内容的顶部。
此分類上一篇: <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>
我知道我稍晚回答这个问题,我没有打扰阅读每一个答案,所以这可能是一个重复。
inner { width: 50%; background-color: Khaki; margin: 0 auto; }