如何将未知宽度的绝对定位内容居中?

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: absolutewidth: 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

使用 gridinset

实现绝对居中内容的现代方法

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 内水平居中绝对定位的元素? [复制]

css绝对定位如何水平居中?

如何将绝对定位的元素居中?

React Native 绝对定位水平居中

当宽度未知时,将图像水平居中并将其垂直放置在 div 内的底部

绝对定位情况下水平垂直居中小技巧