Question

我已经看到了关于如何将块元素居中的一百万个问题，似乎有几种流行的方法可以做到，但它们都依赖于固定的像素宽度。然后是margin:0 auto或绝对/相对定位和left:50%; margin-left:[-1/2 width];等。如果元素的宽度设置为％，我们都知道这不起作用。

真的没有办法以真正流畅的方式做到这一点吗？我正在谈论使用%宽度（不设置十几个媒体查询的固定宽度越来越小）。

注意：有很多解决方案使用热门词“响应”，但不回答我的问题（因为他们无论如何都使用固定宽度）。这是an example。

更新我差点忘了：你如何处理限制居中元素的最大宽度并仍然保持在中心？在@ smdrager的回答下看到我的评论。现实生活中的例子。我想要一个弹出消息或一个灯箱效果，其中包含一段文本在窗口中居中显示，文本根据宽度流畅地换行。但我不希望文本框在文本难以阅读的地方伸展得太远（想象一个4英尺的屏幕，其中三个段落延伸到一行文本上）。如果为大多数方法添加最大宽度，则在达到最大宽度时，居中框将停止居中。

Answer 1

水平和垂直居中

实际上，以百分比为单位的高度和宽度使其更容易居中。您只需将左侧和顶部偏移一半未被div占用的区域。

因此，如果你的身高是40％，那么100％ - 40％= 60％。所以你想要30％以上和以下。最重要的是：30％可以解决问题。

请参阅此处的示例：http://dabblet.com/gist/5957545

仅水平居中

使用内联块。然而，这里的另一个答案对IE 8及以下版本不起作用。您必须使用CSS hack或条件样式。这是黑客版本：

请参阅此处的示例：http://dabblet.com/gist/5957591

.inlineblock { 
    display: inline-block;
    zoom: 1;
    display*: inline; /* ie hack */
}

修改

通过使用媒体查询，您可以结合使用两种技术来实现所需的效果。唯一的复杂因素是身高。您使用嵌套div在％width和

之间切换

http://dabblet.com/gist/5957676

@media (max-width: 1000px) {
    .center{}
    .center-inner{left:25%;top:25%;position:absolute;width:50%;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}
@media (min-width: 1000px) {
    .center{left:50%;top:25%;position:absolute;}
    .center-inner{width:500px;height:100%;margin-left:-250px;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}

Answer 2

来自Chris Coyier关于centering percentage width元素的文章：

使用否定translate()而不是使用负边距变换。

.center {
  position: absolute;
  left: 50%;
  top: 50%;

  /*
  Nope =(
  margin-left: -25%;
  margin-top: -25%;
  */

  /* 
  Yep!
  */
  transform: translate(-50%, -50%);

  /*
  Not even necessary really. 
  e.g. Height could be left out!
  */
  width: 40%;
  height: 50%;
}

Codepen

Answer 3

我认为您可以对要居中的元素使用display: inline-block，并在其父级上设置text-align: center;。这绝对是所有屏幕尺寸的中心。

在这里你可以看到一个小提琴：http://jsfiddle.net/PwC4T/2/我在这里添加代码是为了完整。

<强> HTML

<div id="container">
    <div id="main">
        <div id="somebackground">
            Hi
        </div>
    </div>
</div>

<强> CSS

#container
{
    text-align: center;
}
#main
{
    display: inline-block;
}
#somebackground
{
    text-align: left;
    background-color: red;
}

对于垂直居中，我“删除”了对某些旧浏览器的支持，支持display: table;，这绝对减少了代码，请看这个小提琴：http://jsfiddle.net/jFAjY/1/

这是完整性的代码（再次）：

<强> HTML

<body>
    <div id="table-container">
        <div id="container">
            <div id="main">
                <div id="somebackground">
                    Hi
                </div>
            </div>
        </div>
    </div>
</body>

<强> CSS

body, html
{
    height: 100%;
}
#table-container
{
    display:    table;
    text-align: center;
    width:      100%;
    height:     100%;
}
#container
{
    display:        table-cell;
    vertical-align: middle;
}
#main
{
    display: inline-block;
}
#somebackground
{
    text-align:       left;
    background-color: red;
}

这种方法的优点是什么？您不必处理任何percantage ，它还可以正确处理<video>标记（html5），它有两种不同的大小（一种在加载期间，一种在加载后，您可以' t获取标签大小'直到视频加载为止。

缺点是它会丢弃对某些旧版浏览器的支持（我认为IE8无法正确处理）

Answer 4

编辑：
http://codepen.io/gcyrillus/pen/daCyu 因此，对于弹出窗口，您必须使用position：fixed，display：table属性和max-width with em或rem值：）有了这个CSS基础：

#popup {
  position:fixed;
  width:100%;
  height:100%;
  display:table;
  pointer-events:none;
}
#popup > div {
  display:table-cell;
  vertical-align:middle;
}
#popup p {
  width:80%;
  max-width:20em;
  margin:auto;
  pointer-events:auto;
}

Answer 5

这样的事情可能是吗？

HTML

 <div class="random">
        SOMETHING
 </div>

CSS

body{

    text-align: center;
}

.random{

    width: 60%;
    margin: auto;
    background-color: yellow;
    display:block;

}

DEMO：http://jsfiddle.net/t5Pp2/2/

编辑：添加display:block不会毁了这件事，所以......

您还可以将保证金设置为：margin: 0 auto 0 auto;，以确保它仅以这种方式居中，而不是从顶部开始。

Answer 6

这可能听起来很简单......

但是这会将div放在div中心，正好在左右边距或父容器的中心，但你可以左右对称地调整百分比。

margin-right: 10%;
margin-left: 10%;

然后你可以调整％以使其尽可能宽。

CSS：在限制最大宽度的同时，以流体div为中心（没有px宽度）的响应方式？

6 个答案:

修改

HTML

CSS