如何在div中对绝对定位元素进行居中？我要放一个div(与position:absolute;)元素在我的窗口中间。但我在做这件事上有问题，因为宽度未知.我试过这个。但它需要调整，因为宽度是响应。.center {
left: 50%;
bottom:5px;}有什么想法吗？
3 回答
婷婷同学_
TA贡献1844条经验 获得超8个赞
<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
TA贡献1831条经验 获得超10个赞
这对我有用：
#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>
鸿蒙传说
TA贡献1865条经验 获得超7个赞
响应解
.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>
left: 50%translate
.centered-axis-xy {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);}transform-webkit-transform: translate(-50%,-50%);
添加回答
举报
0/150
提交
取消