Question

这看起来像一个非常简单的问题，但我找不到答案：

我想将固定宽度为500px的div居中。标记和样式如下：

<div>
Lorem ipsum dolor sit amet, diceret delectus ea quo, ne eum essent legendos tacimates. Vel at perfecto omittantur. Iusto dolores sed an, error copiosae at his. Laoreet veritus vocibus te mel. An eos assum nobis vituperata, pro ad labitur facilis.
</div>

body {text-align:center;}
div {display:inline-block;width:500px;}

当视口比我的div宽时，这很有效。但是当视口小于我的div时，它不再居中，而是溢出到右边。我希望我的div在视口的两侧溢出，因此它保持居中。这有可能用CSS吗？

非常感谢！

body {text-align:center;}
div {display:inline-block;width:500px;}

<div>
Lorem ipsum dolor sit amet, diceret delectus ea quo, ne eum essent legendos tacimates. Vel at perfecto omittantur. Iusto dolores sed an, error copiosae at his. Laoreet veritus vocibus te mel. An eos assum nobis vituperata, pro ad labitur facilis.
</div>

Answer 1

首先，为什么有人会放大那么远。现在我认为你必须在css中做overflow: hidden;这样的事情，这应该有用。这个问题已经可以在is this the answer you're looking for?

回答了

Answer 2

你去吧

Working JSFIDDLE

@media (max-width: 500px) {
  div {
      width:auto;
  }

}

它仍然是500px宽，但是当进入一个较小的屏幕时，在这个例子中500px宽，它将获得width：auto属性，并允许文本保持中心并保持在屏幕上。

您可以详细了解媒体查询here

希望这能帮到你：）

// Marc Hjorth

中心div左右溢出

2 个答案: