absolute 相关问题

我正在尝试将蓝色容器放在粉红色容器的中间，但似乎垂直对齐：中间；在那种情况下不做这项工作。我试图在粉红色容器中间放置蓝色容器，但似乎 vertical-align: middle; 在那种情况下无法完成工作。 <div style="display: block; position: absolute; left: 50px; top: 50px;"> <div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;"> <div style="background-color: lightblue;">test</div> </div> </div> 结果：期望：请建议我怎样才能做到这一点。 Jsfiddle 首先请注意，vertical-align仅适用于表格单元格和行内级元素。有几种方法可以实现垂直对齐，这可能会或可能不会满足您的需求。不过，我会告诉你两个方法来自我的最爱： 1。使用 transform 和 top .valign { position: relative; top: 50%; transform: translateY(-50%); /* vendor prefixes omitted due to brevity */ } <div style="position: absolute; left: 50px; top: 50px;"> <div style="text-align: left; position: absolute;height: 56px;background-color: pink;"> <div class="valign" style="background-color: lightblue;">test</div> </div> </div> 重点是top上的百分比值是相对于包含块的height的；虽然 transforms 上的百分比值是相对于框本身（边界框）的大小。如果您遇到字体渲染问题（字体模糊），解决方法是将 perspective(1px) 添加到 transform 声明中，使其变为： transform: perspective(1px) translateY(-50%); 值得注意的是，CSS transform 在IE9+中得到支持. 2。使用inline-block（伪）元素在这个方法中，我们有两个兄弟inline-block元素，它们通过vertical-align: middle声明在中间垂直对齐。其中一个有其父级的height的100%，另一个是我们想要的元素，我们希望将其对齐在中间。 .parent { text-align: left; position: absolute; height: 56px; background-color: pink; white-space: nowrap; font-size: 0; /* remove the gap between inline level elements */ } .dummy-child { height: 100%; } .valign { font-size: 16px; /* re-set the font-size */ } .dummy-child, .valign { display: inline-block; vertical-align: middle; } <div style="position: absolute; left: 50px; top: 50px;"> <div class="parent"> <div class="dummy-child"></div> <div class="valign" style="background-color: lightblue;">test</div> </div> </div> 最后，我们应该使用可用的方法之一来消除内联级元素之间的间隙。使用这个： .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 参考此链接：https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/ 在绝对定位的 div 中使用 flex blox 使其内容居中。参见示例https://plnkr.co/edit/wJIX2NpbNhO34X68ZyoY?p=preview .some-absolute-div { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } 垂直和水平居中： .parent{ height: 100%; position: absolute; width: 100%; top: 0; left: 0; } .c{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); } 仅垂直居中 <div style="text-align: left; position: relative;height: 56px;background-color: pink;"> <div style="background-color: lightblue;position:absolute;top:50%; transform: translateY(-50%);">test</div> </div> 我总是这样做，这是一个非常简短和容易的代码，可以水平和垂直居中 .center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } <div class="center">Hello Centered World!</div> 编辑：10/22 就像现在一样，display flex 或 grid 被广泛实施我建议使用其中之一（display:table/table-cell 如果您需要与旧的或异国情调的浏览器，比如我的电视......）弹性 .a{ position: absolute; left: 50px; top: 50px; } .b{ display:flex; align-items:center; background-color: pink; height: 56px; } .c { background-color: lightblue; } /* move the flex demo aside */ .a.b{left:100px} You even need less markup <div class="a"> <div class="b"> <div class="c">test</div> </div> </div> <div class="a b"> <div class="c">test</div> </div> 网格（在这一点上类似） .a{ position: absolute; left: 50px; top: 50px; } .b{ display:grid; align-items:center; background-color: pink; height: 56px; } .c { background-color: lightblue; } /* move the grid demo aside */ .a.b{left:100px} You even need less markup <div class="a"> <div class="b"> <div class="c">test</div> </div> </div> <div class="a b"> <div class="c">test</div> </div> 原始答案 02/2015（在任何地方仍然有效）与尚未实现 flex 或 grid 的非常古老或奇特的浏览器一起使用您可以使用display:table/table-cell; .a{ position: absolute; left: 50px; top: 50px; display:table; } .b{ text-align: left; display:table-cell; height: 56px; vertical-align: middle; background-color: pink; } .c { background-color: lightblue; } <div class="a"> <div class="b"> <div class="c" >test</div> </div> </div> 这里是使用 Top 对象的简单方法。 eg：如果绝对元素大小是 60px。 .absolute-element { position:absolute; height:60px; top: calc(50% - 60px); } 额外的简单解决方案 HTML： <div id="d1"> <div id="d2"> Text </div> </div> CSS： #d1{ position:absolute; top:100px;left:100px; } #d2{ border:1px solid black; height:50px; width:50px; display:table-cell; vertical-align:middle; text-align:center; } 您可以通过在父 div 中使用 display:table; 和在子 div 中使用 display: table-cell; vertical-align: middle; 来做到这一点 <div style="display:table;"> <div style="text-align: left; height: 56px; background-color: pink; display: table-cell; vertical-align: middle;"> <div style="background-color: lightblue; ">test</div> </div> </div> 就我而言， centered-vertically { height: 60px; display: flex; justify-content: center; -webkit-align-items: center; } 工作将绝对项目垂直和水平居中定位到屏幕的更简单的方法是使用“inset”属性。 .center-horizontally-vertically{ position: absolute; inset: 0; margin: auto; } <div class="center-horizontally-vertically"> Test </div> inset 属性立即将左、右、上和下属性设置为 0。

html css vertical-alignment absolute

回答 11 投票 0

在另一个框的右上角插入框[关闭]

在此处输入图片描述我目前正在尝试将其插入另一个框的右上角，但我无法将其放在右上角，而是框只是与文字重叠。＃盒子 {

html css position css-position absolute

回答 0 投票 0

了解具有“固定”和“绝对”位置的不同嵌套元素的行为方式

很简单的代码，但是我还没有找到明确的答案据我了解，所有绝对定位的 HTML 元素都根据最近的非静态/定位元素获得它们的位置......

html css position css-position absolute

回答 0 投票 0

如何使响应成为绝对位置？

我在图像上制作了一个地图标签，当点击地图的特定部分时，它会将用户带到一个特定的 URL，因此它可以在大屏幕上工作，但在中小屏幕上，ab 的位置...