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

Posted 2023-03-05

【中文标题】元素不会保持居中，尤其是在调整屏幕大小时

【英文标题】：Element will not stay centered, especially when re-sizing screen

【发布时间】：2016-08-17 11:12:58

【问题描述】：

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

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

我错过了什么？

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>

【参考方案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 在 cmets 中指出这一点。）

这是完整的代码：

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

【讨论】：

注意translate(-50%,0) rotate(45deg) 中的转换顺序很重要。使用rotate(45deg) translate(-50%,0)会先旋转，然后平移方向会旋转，结果会出错。

以及顺序重要性的解释在这里：***.com/questions/51077632/…:p

【参考方案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>

【讨论】：

唯一的问题是您需要知道要居中的项目的宽度。如果您想要更通用且可在各种上下文中使用的东西，我认为 transform 方法可能更可靠。