如何在div中对绝对定位元素进行居中？
如何在div中对绝对定位元素进行居中？
divposition:absolute;
.center {
left: 50%;
bottom:5px;}
智慧大石浏览 3733回答 3
3回答
-
婷婷同学_
<body> <div style="position: absolute; left: 50%;"> <div style="position: relative; left: -50%; border: dotted red 1px;"> I am some centered shrink-to-fit content! <br /> tum te tum </div> </div></body> -
慕哥6287543
这对我有用：#content { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 100px; /* Need a specific value to work */}<body> <div> <div id="content"> I'm the content </div> </div></body> -
鸿蒙传说
响应解这里有一个很好的解决方案用于响应性设计或未知尺寸总体而言如果你不需要支持IE8和更低的。.centered-axis-x { position: absolute; left: 50%; transform: translate(-50%, 0);}.outer { position: relative; /* or absolute */ /* unnecessary styling properties */ margin: 5%; width: 80%; height: 500px; border: 1px solid red;}.inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* unnecessary styling properties */ max-width: 50%; text-align: center; border: 1px solid blue;}<div class="outer"> <div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div></div>这是一个JS Fiddle线索是，left: 50%是相对于父级的，而translate转换相对于元素的宽度/高度。这样，您就有了一个完美的居中元素，子元素和父元素都具有灵活的宽度。奖励：即使孩子比父母大，这也是可行的。您也可以用它垂直对中(同样，父级和子级的宽度和高度可以完全灵活(和/或未知)：.centered-axis-xy { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}记住你可能需要transform供应商的前缀也是。例如-webkit-transform: translate(-50%,-50%);
随时随地看视频慕课网APP
JavaScript
Html/CSS