为啥我的覆盖 div 不居中 [重复]
Posted
技术标签:
【中文标题】为啥我的覆盖 div 不居中 [重复]【英文标题】:Why my overlay div is not centering [duplicate]为什么我的覆盖 div 不居中 [重复] 【发布时间】:2014-11-23 05:36:30 【问题描述】:我相信这对专业人士来说是一个“简单的”:
我不知道如何将 叠加层 居中(水平和垂直)到其父级。有关详细信息,请参阅 jsfiddle 链接。
提前感谢您的宝贵时间...
磅数
<div class="grandparent">
<div class="parent">
<!-- 1st row */ -->
<div class="child">1-1</div>
<div class="child">1-2</div>
<div class="child">1-3</div>
<!-- 2nd row */ -->
<div class="child">2-1</div>
<div class="child">2-2</div>
<div class="child">2-3</div>
<!-- 3rd row */ -->
<div class="child">3-1</div>
<div class="child">3-2</div>
<div class="child">3-3</div>
<div class="overlay">
Overlaysdfds
line2sdf sdfdsf sdfsdf sfdsdf
<P />line 3
</div>
</div>
</div>
和 CSS:
<style>
.grandparent
posttion: relative;
height: 100%;
width:100%;
max-width:600px;
margin: 0 auto;
text-align:center;
border: 1px solid green;
overflow: hidden;
.parent
width: 75%;
height: 75%;
margin: auto;
border: 1px solid blue;
text-align: center;
padding:20px;
verflow:hidden;
.parent:after
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
.child
posttion: relative;
float:left;
width: 30%;
padding-bottom: 22%;
margin:1.66%;
background-color: #1E1E1E;
color: #ffffff;
.overlay
position:absolute;
top:50%;
left:50%;
margin-left: -150px;
margin-top:-100px;
color: white; background: #666666; opacity: .8;
z-index: 1000;
<style>
这是示例的链接
http://jsfiddle.net/lb6688/aj7udvsq/3/
再次感谢您的宝贵时间!!!
【问题讨论】:
您的 html 中有无效标记: 我对在 Stack Overflow 上被问到同样问题的次数以及人们仍然如何问它的次数感到惊讶。在发布之前证明几乎没有研究。如果你在谷歌上搜索“垂直和水平堆栈溢出中心元素”(不带引号),你会得到超过 150 万个结果!而且发布问题和创建小提琴会花费更少的时间......耸耸肩 这是一个完全不同的问题恕我直言!!! 有什么不同?您为此问题获得的答案适用于您的问题,它们与 Hashem 建议的问题中的答案相同(例如:***.com/a/25776315/3695983)。你的代码可能不同,但问题的本质是完全一样的。 我明白你的意思。谢谢,下次我会努力的:) 【参考方案1】:查看 CSS 处的更改:http://jsfiddle.net/csdtesting/w4boh5mg/1/
.overlay
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 50%;
text-align: center;
border: 1px solid blue;
color: white; background: #666666; opacity: .8;
.parent
position: relative; /* or absolute */
margin: 5%;
width: 80%;
height: 500px;
border: 1px solid red;
【讨论】:
我需要垂直居中的覆盖在它的父级中。我一直在为“居中”元素而苦苦挣扎【参考方案2】:使用transform:translate(-50%, -50%)
使父元素居中(而不是margin-top 和margin-left 的硬编码值):
.overlay
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
color: white; background: #666666; opacity: .8;
z-index: 1000;
在这里查看它的工作原理:http://jsfiddle.net/aj7udvsq/4/
【讨论】:
感谢您的帮助和您的 cmets。我需要在它的父级中垂直居中的叠加层。有什么建议吗? 非常感谢您的帮助!!! @LittleBrother:将position:relative;
与覆盖层中指示的transform:translate(-50%, -50%);
一起添加到父级,它将起作用。修复了 JSFiddle(我意识到有一些无效的样式:posttion: relative;
或 verflow:hidden;
),现在它可以正常工作了:jsfiddle.net/aj7udvsq/6
你太棒了!感谢您的时间和耐心!!!以上是关于为啥我的覆盖 div 不居中 [重复]的主要内容,如果未能解决你的问题,请参考以下文章