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

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在评论中指出这一点。)

下面是完整的代码：

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

您可能会使用新的CSS 3。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>