元素不会保持居中，特别是在重新调整屏幕大小时

Question

我的问题是我无法将三角指针水平居中。

好吧，我可以将指针放在一些窗口大小的中心位置，但是当我缩小或扩展窗口时，它会将它放在错误的位置。

我错过了什么？

body {
  background: #333333;
}
.container {
  width: 98%;
  height: 80px;
  line-height: 80px;
  position: relative;
  top: 20px;
  min-width: 250px;
  margin-top: 50px;
}
.container-decor {
  border: 4px solid #C2E1F5;
  color: #fff;
  font-family: times;
  font-size: 1.1em;
  background: #88B7D5;
  text-align: justify;
}
.container:before {
  top: -33px;
  left: 48%;
  transform: rotate(45deg);
  position: absolute;
  border: solid #C2E1F5;
  border-width: 4px 0 0 4px;
  background: #88B7D5;
  content: '';
  width: 56px;
  height: 56px;
}

<div class="container container-decor">great distance</div>

Answer 1

您的箭头以left:48%为中心。这会根据箭头元素的左边缘将箭头定位在容器的中心附近。

换句话说，假设您使用了left:50%（这是正确的方法），此不会将容器中的箭头元素居中。它实际上将元素的左边居中放在容器中。

在下图中，标记使用text-align:center在页面上居中。

为了进行比较，请参阅以left:50%为中心的箭头。

元素位于中右侧。随着窗口变小，这种错位变得更加明显。

因此，通常会看到居中，绝对定位的元素使用transform属性：

.triangle {
   position: absolute;
   left: 50%;
   transform: translate(-50%,0);
}

transform规则告诉三角形将自身向后移动宽度的50％。这使它完美地以线为中心。现在它模仿text-align:center。

在translate(-50%,0)中，第一个值以x轴（水平）为目标，另一个值以y轴为目标。等效规则为transform:translateX(-50%)（还有transform:translateY()）。

  

顺便说一句，这里是如何将元素水平和中心放置的   垂直使用此方法：

.triangle {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
}

     

注意：如果您使用的是right: 50%或bottom: 50%，则相应的translate值将为50%（非负数）。

然而，在这个特定问题中，出现了一个问题，因为transform:rotate(45deg)也在声明块中。添加第二个transform表示第一个被忽略（按照级联）。

所以，作为一个解决方案，试试这个：

.container::before {
    left: 50%;
    transform: translate(-50%,0) rotate(45deg);
}

通过将功能链接在一起，可以应用多种功能。

请注意，订单很重要。如果translate和rotate被反转，则三角形将首先旋转45度，然后沿旋转轴移动-50％，从而打破布局。因此，请确保translate先行。 （感谢@Oriol在评论中指出这一点。）

这里是完整的代码：

＆＃13;

＆＃13;

body {
    background: #333333;
}

.container {
    width: 98%;
    height: 80px;
    line-height: 80px;
    position: relative;
    top: 20px;
    min-width: 250px;
    margin-top: 50px;
}

.container-decor {
    border: 4px solid #C2E1F5;
    color: #fff;
    font-family: times;
    font-size: 1.1em;
    background: #88B7D5;
    text-align: justify;
}

.container::before {
    top: -33px;
    left: 50%;
    transform: translate(-50%,0) rotate(45deg);
    position: absolute;
    border: solid #C2E1F5;
    border-width: 4px 0 0 4px;
    background: #88B7D5;
    content: '';
    width: 56px;
    height: 56px;
}

＆＃13;

<div class="container container-decor">great distance</div>

＆＃13;

＆＃13;

＆＃13;

jsFiddle

Answer 2

您可以使用新的CSS3 calc()函数，该函数允许您通过算术来计算中心点。

要获得您的中心点，计算必须是：

50% - (56px / 2)

所以这最终成为了

50% - 28px

将其放入calc()函数应该在浏览器中找出并将其完美地放在中心位置。

body {
  background: #333333;
}
.container {
  width: 98%;
  height: 80px;
  line-height: 80px;
  position: relative;
  top: 20px;
  min-width: 250px;
  margin-top: 50px;
}
.container-decor {
  border: 4px solid #C2E1F5;
  color: #fff;
  font-family: times;
  font-size: 1.1em;
  background: #88B7D5;
  text-align: justify;
}
.container:before {
  top: -33px;
  left: calc(50% - 28px);
  transform: rotate(45deg);
  position: absolute;
  border: solid #C2E1F5;
  border-width: 4px 0 0 4px;
  background: #88B7D5;
  content: '';
  width: 56px;
  height: 56px;
}

<div class="container container-decor">great distance</div>