中心绝对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屋！