元素不会保持居中位置，特别是当调整屏幕大小时。

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&nbsp;{ &nbsp;&nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;&nbsp;left:&nbsp;50%; &nbsp;&nbsp;&nbsp;transform:&nbsp;translate(-50%,0);}这个transform规则告诉三角形向后移动其宽度的50%。这使得它完全集中在线上。现在它模仿了text-align:center.在……里面translate(-50%,0)，第一个值的目标是x轴(水平)，另一个值是y轴.一个等价的规则是transform:translateX(-50%)(还有transform:translateY()).另外，下面是如何使用此方法对元素进行水平和垂直居中的方法：.triangle&nbsp;{ &nbsp;&nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;&nbsp;left:&nbsp;50%; &nbsp;&nbsp;&nbsp;top:&nbsp;50%; &nbsp;&nbsp;&nbsp;transform:&nbsp;translate(-50%,-50%);}注意：如果你用right: 50%或bottom: 50%，各自translate价值将是50%(不是否定).然而，在这个特定的问题中，出现了一个问题，因为transform:rotate(45deg)也在声明块中。再加一秒钟transform意味着第一个被忽略(按级联)。因此，作为解决方案，请尝试如下：.container::before&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;50%; &nbsp;&nbsp;&nbsp;&nbsp;transform:&nbsp;translate(-50%,0)&nbsp;rotate(45deg);}通过将函数链接在一起，可以应用多个函数。注意秩序很重要。如果translate和rotate相反，三角形首先旋转45度，然后移动-50%。沿旋转轴打破布局。所以要确保translate第一名。(谢谢@Oriol在评论中指出这一点。)下面是完整的代码：body {&nbsp; &nbsp; background: #333333;}.container {&nbsp; &nbsp; width: 98%;&nbsp; &nbsp; height: 80px;&nbsp; &nbsp; line-height: 80px;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; top: 20px;&nbsp; &nbsp; min-width: 250px;&nbsp; &nbsp; margin-top: 50px;}.container-decor {&nbsp; &nbsp; border: 4px solid #C2E1F5;&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; font-family: times;&nbsp; &nbsp; font-size: 1.1em;&nbsp; &nbsp; background: #88B7D5;&nbsp; &nbsp; text-align: justify;}.container::before {&nbsp; &nbsp; top: -33px;&nbsp; &nbsp; left: 50%;&nbsp; &nbsp; transform: translate(-50%,0) rotate(45deg);&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; border: solid #C2E1F5;&nbsp; &nbsp; border-width: 4px 0 0 4px;&nbsp; &nbsp; background: #88B7D5;&nbsp; &nbsp; content: '';&nbsp; &nbsp; width: 56px;&nbsp; &nbsp; height: 56px;}<div class="container container-decor">great distance</div>jsFiddle

Answer 2

您可能会使用新的CSS 3。calc()函数，它允许您做算术来计算中心点。要得到你的中心点，计算必须是：50% - (56px / 2)所以这最后是50% - 28px把这个放进calc()函数应该在浏览器中找到它，并将它完美地放置在中心。body {&nbsp; background: #333333;}.container {&nbsp; width: 98%;&nbsp; height: 80px;&nbsp; line-height: 80px;&nbsp; position: relative;&nbsp; top: 20px;&nbsp; min-width: 250px;&nbsp; margin-top: 50px;}.container-decor {&nbsp; border: 4px solid #C2E1F5;&nbsp; color: #fff;&nbsp; font-family: times;&nbsp; font-size: 1.1em;&nbsp; background: #88B7D5;&nbsp; text-align: justify;}.container:before {&nbsp; top: -33px;&nbsp; left: calc(50% - 28px);&nbsp; transform: rotate(45deg);&nbsp; position: absolute;&nbsp; border: solid #C2E1F5;&nbsp; border-width: 4px 0 0 4px;&nbsp; background: #88B7D5;&nbsp; content: '';&nbsp; width: 56px;&nbsp; height: 56px;}<div class="container container-decor">great distance</div>