中心绝对div在另一个div [英] Center absolute div in another div
问题描述
是否有一种方法可以在父元素中放置一个绝对div,位于z-index的内容上方?
; div id =parent>
< div id =absolute-centered>< / div>
< / div>
父级的大小未知。
将div垂直和水平居中到另一个的简单方法是这样的:
.container {position:relative; width:100px; / *不是解决方案的一部分* / height:100px; / *不是解决方案的一部分* / background-color:#808; / *不是解决方案的一部分* / border-radius:50%; / *不是解决方案的一部分* /}。content {position:absolute; top:50%;左:50%; transform:translate(-50%,-50%); text-align:center; / *不是解决方案的一部分* /}
< div class =container> < div class =content>我绝对集中< / div>< / div>
您还可以将水平/垂直对齐方式嵌套到另一个 absolute
定位的div。您的父项相对
可以是绝对
或固定
if
如果您只想垂直对齐,请使用 translateY(-50%)
对齐,使用 translateX(-50%)
与补充顶部
或左
属性。
最后,你可以改变50%到任何你想要的,不只是«center»内容。
is there a way to place a absolute div inside his parent centered and above the content with z-index?
<div id="parent">
<div id="absolute-centred"></div>
</div>
The size of the parent is unknown. the absolute div should be overlaying the content.
The easy way to vertically and horizontally center a div into another goes like this:
.container {
position: relative;
width: 100px; /* not part of solution */
height: 100px; /* not part of solution */
background-color: #808; /* not part of solution */
border-radius: 50%; /* not part of solution */
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center; /* not part of solution */
}
<div class="container">
<div class="content">I'm absolutly centered</div>
</div>
You could also nest your horizontal/vertical alignment to another absolute
positioned div. Your parent relative
could be an absolute
, or fixed
if you prefer.
If you just want vertical align, use translateY(-50%)
and if you want horizontal align, use translateX(-50%)
with complementary top
or left
property.
And last, you could change 50% to whatever you want to not only « center » content.
这篇关于中心绝对div在另一个div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!