元素不会居中，尤其是在调整屏幕大小时

Question

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

好吧，我可以将某些 window 大小的指针居中，但是当我缩小或扩展 window 时，它再次将其放置在错误的位置。

我错过了什么？

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% 为中心的箭头。

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

因此，通常会看到居中、绝对定位的元素使用 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()）。

As an aside, here's how to center an element both horizontally and vertically using this method:
.triangle {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
}
Note: If you were using right: 50% or bottom: 50%, the respective translate values would be 50% (not negative).

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

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

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

通过将函数链接在一起，可以应用多个函数。

请注意顺序很重要。如果 translate 和 rotate 颠倒，三角形会先旋转 45 度，然后沿旋转轴移动 -50% ，破坏布局。因此，请确保 translate 先行。（感谢 @Oriol 在评论中指出这一点。）

完整代码如下：

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; }

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

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>

元素不会居中，尤其是在调整屏幕大小时

Element will not stay centered, especially when re-sizing screen

html

css

css-shapes

jsFiddle