Question

我使用翻译

对DIV进行居中

position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);

它确实把它放在中间，但是每边都有太多的余量。这意味着，虽然它位于中间，但在调整窗口大小时，它永远不会进入浏览器窗口的边缘。

＆＃13;

div {
  text-align: center;
  font-size: 80pt;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
  border: 1px solid grey;
}

＆＃13;

<div>Look at me, I'm centered, with too much margin.</div>

＆＃13;

http://codepen.io/anon/pen/LbQxLV

Answer 1

这就是文本包装的工作原理。当你将div放在页面的50％左右时，它可以获得的最大宽度是从屏幕左边50％的起始点到页面的右边缘，即仅50％。你看到的是哪个。

因此，当使用translate来居中div时，如果要将其填充为父级，则必须指定宽度。

所以，只需指定元素的宽度！

添加以下代码：

div{
  width: 100%;
  max-width: 90%;
}

根据您的需要进行更改！

使用翻译对div进行居中会留下太多余量

1 个答案: