Question

我想，这个问题已经被提出，但我没有找到解决问题的好办法。

我有以下星座：我有一个父元素和一个可以是横向或纵向的图像。我的目标是 - 无论如何：我将图像的最小宽度/高度设置为50px，因此图片的一部分将与父图像重叠。现在我想把照片放在中心位置，无论它有什么尺寸。

现在它看起来与此类似：http://jsfiddle.net/EYL25/（在我的情况下，我会设置一个额外的类来确定方向，由JavaScript设置 - 我不喜欢这个解决方案，但不能＆＃39找不到更好的一个）

<div class="wrap is-landscape">
    <div class="element">Element 1</div>
</div>

<div class="wrap is-portrait">
    <div class="element">Element 2</div>
</div>

但它应该如下所示：http://jsfiddle.net/4t76d/

有没有人知道如何将内部元素置于中心位置，无论它的方向和大小如何？

小补充：我正在寻找没有任何JavaScript的解决方案

Answer 1

你很难使用JavaScript。

.element
{
    left: 50%;
    margin-left: -{element-width / 2};
    top: 50%;
    margin-top: -{element-height / 2};
}

您需要获取元素尺寸，然后设置margin-left和-top。

Answer 2

用户CSS代替。

.center {
  position: fixed;
  top: 50%;
  left: 50%;
}

两个方向的中心图像

2 个答案: