【问题标题】:Is it possible to position elements by their center?是否可以按元素的中心定位元素?
【发布时间】:2012-11-19 17:04:07
【问题描述】:

使用position: absolute,您可以通过定义元素的一个角来放置元素(通常使用 top 和 left 属性)。是否可以通过定义它的中心来放置它? (不知道它的宽度/高度?)。

【问题讨论】:

  • 为什么不使用 margin:0 auto;使元素居中?
  • 因为不想居中,所以想定位。

标签: html css layout positioning placement


【解决方案1】:

我已经用这个jsFiddle link回答了一个类似的问题

用我的回答链接到类似问题:Position the center of an image using css

然后,您可以使用像素来使用上/左坐标,无论宽度/高度如何,它都会使用对象的中心,这可能是动态适合内容的。一个问题可能是您需要设置一些 z-indexes 和样式,以便其他包装器 div 不会打扰您的其余内容,这可能是使用这种方法的一个缺点。

解决方案在于使用包含实际位置的包装 div,并在其中使用另一个包含样式的包装 div:position: relative;padding-top: 25%;margin-top: -100%;margin-left: -100%;。 margin-left 样式将很容易应用,但 margin-top 需要填充,因此需要额外的包装 div。

如果你想要另一种方法,我想你将不得不使用 Javascript。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-01-17
    • 1970-01-01
    • 1970-01-01
    • 2015-09-03
    • 2013-07-25
    • 2017-07-15
    • 1970-01-01
    • 2013-02-05
    相关资源
    最近更新 更多