Question

我正在尝试将具有不同宽度的Div（基于网站内容）居中。

我在这里读到了一个相对定位技术：

http://www.tightcss.com/centering/center_variable_width.htm

但我认为必须有一种更简单的方法吗？

Answer 1

这是一个非常可靠的方法，应该适用于大多数浏览器。当你把它分解时，它并不是那么复杂。这是一个基本的例子：

<style type="text/css">
#hideoverflow { overflow: hidden; }
#outer { position: relative; left: 50%; float: left; }
#inner { position: relative; left: -50%; float: left; }
</style>

<div id="hideoverflow">
    <div id="outer">
        <div id="inner">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id velit vel  augue fringilla rhoncus at et odio. Suspendisse potenti. Aliquam justo  libero, commodo ut iaculis in, placerat vel purus.
        </div>
    </div>
</div>

Answer 2

@Talon;你可以这样做http://jsfiddle.net/sandeep/7PXQF/

CSS：

.container{
background-color:red;
    text-align:center;
}
.center{
background-color:yellow;
display:inline-block;
text-align:left;}

HTML：

<div class="container">
    <div class="center">
      <p>This is a div with an much wider width, to make the yellow div go off the page to the right.  We'll type a bit more to be sure.</p>
      <p>Most people will see a horizontal scroll bar on the bottom, unless their screen is very wide.</p>
    </div>
  </div>

Answer 3

嗯，它不能比这更简单，并且在所有浏览器上都有完全的支持;甚至不需要容器：

.centered {
  display:table;
  margin:0 auto;
}

<div class="centered">
  content
</div>

这是一个工作小提琴：https://jsfiddle.net/1tnprnoz/

Answer 4

现在使用flex-box，您可以使用justify-content: center;轻松实现此目的。

#container{
  background: gray;
  display: flex;
  justify-content: center;
}

<div id="container">
  <div id="content" style="width: 200px; padding: 5px; background: #ffa637;">
    This is a centered div This is a centered div This is a centered div This is a centered div
  </div>
</div>

这也可以通过将margin: auto应用于容器子选择器#container>*来实现。

#container{
  background: #c7c7c7;
}
#container>*{
  margin: auto;
}

<div id="container">
  <div id="content" style="width: 200px; padding: 5px; background: #ffa637;">
    This is a centered div This is a centered div This is a centered div This is a centered div
  </div>
</div>

注意：内容div的内联样式，因为这些样式是生成的样式，不在此问题的范围内。

在CSS中居中可变宽度div的简便方法

4 个答案: