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

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