如何将未知宽度的绝对定位内容居中?
Posted
技术标签:
【中文标题】如何将未知宽度的绝对定位内容居中?【英文标题】:How do I centre absolutely positioned content of unknown width? 【发布时间】:2012-03-11 04:34:13 【问题描述】:在有人问我为什么要这样做之前,让我直截了当地告诉你。这样,你们中的一个聪明的偷窥者可以告诉我一个更好的方法......
我正在为应该伸展以填满页面的绘画制作查看器,准确地说是屏幕高度的 90%。我想将一幅画淡入另一幅画,并希望将它们中的每一个都放在屏幕中间。
为了让这些画相互淡入淡出,我需要将它们定位为“绝对”以阻止它们堆叠。麻烦就在这里。自从我将它们设置为绝对值后,我用来使包含 div 居中的每种方法都不起作用。
部分问题是我没有为画作设置任何宽度,因为我希望它们动态调整自己的大小以填充用户屏幕的 90%。
我已经找到了数百种将绝对内容居中的方法,并且相信我可能需要收缩包装包含的 div。不过我目前还没有取得任何成功。
html-
<div id="viewer_div">
<img src="" id="first" />
<img id="second" class="hidden"/>
</div>
样式表
#viewer_div
width:1264px;
img
height:90%;
display:block;
margin-left: auto;
margin-right:auto;
上面给了我想要的效果,但不允许我定位图像绝对。谁能建议一种使图像居中的方法,但也可以让我淡出另一个?
【问题讨论】:
嗯,这是一场考验。我相信你知道如何用固定宽度和绝对定位来做到这一点,对吧? 经过一番折腾,我可以保证你不能用纯 CSS 和 (x)HTML 做到这一点。你需要javascript。不幸的是,因为这纯粹是关于显示的,这就是 CSS 的用途……如果你愿意,你可以分叉我的小提琴 jsfiddle.net/dekket/58BjM。据我所知,所以真的无处可去:/ 感谢您的意见。 Greg 在下面展示了一种更简洁的方法来解决我的问题。 看一下,这里回答***.com/questions/17069435/… @AntonIskandiarov 如果你有一个基于百分比的宽度,例如width: 90%;
。这是用于未知/自动宽度,例如width: auto;
,不幸的是,除非将宽度设置为某个值(包括百分比),否则链接的答案会将其视为width: 100%
。您当然可以使用该技巧添加带有width: 100%;
的包装器div,然后以通常的方式将此内容居中放置...
【参考方案1】:
将元素 left
按其宽度的50%
推,然后将其水平平移 50%
对我有用。
.element
position: absolute;
left: 50%;
transform: translateX(-50%);
我在以下链接中找到了这个概念,然后我根据我的水平对齐需求进行了翻译:https://gist.github.com/colintoh/62c78414443e758c9991#file-douchebag-vertical-align-css
【讨论】:
很棒的解决方案。完美运行。 对于浏览器支持,看起来这适用于除 IE8 和 Opera Mini 之外的所有设备:caniuse.com/#feat=transforms2d 嗯...在 ios 上给我带来了麻烦。 传奇!谢谢! 双图例 thx【参考方案2】:要么使用 JavaScript 计算宽度并移动它,
使用 CSS hack 将元素左右移动 50%,
或者不要绝对定位它。
这个答案非常简短,但很重要。如果您需要集中某些东西(意味着您希望浏览器确定中心点的位置并将其定位在那里),那么您不能使用绝对定位 - 因为这会剥夺浏览器的控制权。
要让画作相互淡入,我需要定位它们 'absolute' 阻止它们堆叠。
这就是你的问题所在。您认为出于错误的原因需要绝对定位。
如果您在将元素放在一起时遇到问题,将图像包装在绝对定位的容器中,该容器是 100% 宽度并具有 text-align: center
如果您确实觉得绝对定位是必要的,可以使用以下 hack 来达到您想要的结果:
div
position: absolute;
/* move the element half way across the screen */
left: 50%;
/* allow the width to be calculated dynamically */
width: auto;
/* then move the element back again using a transform */
transform: translateX(-50%);
显然,上面的 hack 有一个糟糕的code smell,但它适用于某些浏览器。请注意:这种 hack 对于其他开发人员或其他浏览器(尤其是 IE 或移动设备)不一定显而易见。
【讨论】:
谢谢格雷格,这很奏效。我认为它必须比我制作的更简单。 我对“这篇文章是否有帮助”表示“是”,这就是您的意思吗? 啊,明白了。再次欢呼,你不知道它造成了多少悲伤。 非常好的答案,效果很好。在我的代码中,我还给了子元素(在这个问题的情况下的图像)“位置:相对”和一个高于它所覆盖的元素的 z-index。这允许子元素(而不是其全角父元素)位于它所在的元素的前面。 这个答案很有用,很有帮助,但最终是不正确的。最近的答案是正确的。【参考方案3】:要摆脱 Samec 的回答,您还可以使用它来将未知尺寸的绝对位置元素垂直和水平居中:
#viewer_div
position: relative;
#viewer_div img
position: absolute;
left: 50%;
top: 0%;
transform: translate(-50%, 50%);
【讨论】:
【参考方案4】:居中 div 与 position: absolute 和 width: unknown:
HTML:
<div class="center">
<span></span>
<div>
content...
</div>
</div>
CSS:
.center
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: grid;
grid-template-columns: auto auto;
/* if you need the overflow */
overflow: auto;
即使内容比屏幕宽度宽也可以使用这个方案,不需要transform: translate
(可以模糊元素)
它是如何工作的:
网格会在第一个auto
之前插入一个span
,并在第二个auto
之前插入一个div
,你会得到:
span(0px) - 自动 - div(...px) - 自动
auto 将彼此相等。
垂直居中也一样,但写grid-template-rows
而不是grid-template-columns
【讨论】:
【参考方案5】:2021
使用 grid 和 inset
实现绝对居中内容的现代方法inset CSS 属性是对应于顶部、右侧、底部和/或左侧的简写。 MDN
#viewer_div
display: grid;
place-items: center;
position: absolute;
inset: auto 0;
*,
::after,
::before
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
body
width: 100vw;
height: 100vh;
background-color: hsl(201, 27%, 10%);
position: relative;
#viewer_div
display: grid;
place-items: center;
position: absolute;
inset: auto 0;
background-color: hsl(197, 7%, 21%);
color: white;
<div id="viewer_div">
<h1>Title 2021</h1>
<img src="https://via.placeholder.com/180x100.png/09f/fff" id="first" />
</div>
【讨论】:
以上是关于如何将未知宽度的绝对定位内容居中?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 100% 宽度的 div 内水平居中绝对定位的元素? [复制]