28

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

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

当心：有大量的解决方案使用流行词“响应式”但不回答我的问题（因为它们无论如何都使用固定宽度）。这是一个例子。

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

4

6 回答 6

43

水平和垂直居中

实际上，以百分比为单位的高度和宽度使居中变得更加容易。您只需将左侧和顶部偏移 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;}
}
于 2013-07-09T13:58:38.547 回答
20

来自 Chris Coyier 关于居中百分比宽度元素的文章：

您不使用负边距，而是使用负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%;
}

密码笔

于 2013-07-09T14:06:08.143 回答
12

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

在这里你可以看到一个小提琴： 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)，它有两种不同的尺寸（一种在加载期间，一种在加载后，在加载视频之前，您无法获取标签尺寸）。

缺点是它放弃了对一些旧浏览器的支持（我认为 IE8 不能正确处理这个问题）

于 2013-07-09T13:58:27.780 回答
2

编辑：
http ://codepen.io/gcyrillus/pen/daCyu 因此，对于弹出窗口，您必须使用 position:fixed 、 display:table 属性和 max-width 以及 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;
}
于 2013-07-09T14:05:53.910 回答
0

可能是这样的吗？

HTML

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

CSS

body{

    text-align: center;
}

.random{

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

}

演示：http: //jsfiddle.net/t5Pp2/2/

编辑：添加display:block不会破坏事情，所以......

您还可以将边距设置为：margin: 0 auto 0 auto;只是为了确保它仅以这种方式而不是从顶部居中。

于 2013-07-09T14:01:55.397 回答
0

这听起来可能真的很简单……

但这将使 div 在 div 内居中，相对于左右边距或父容器正好位于中心，但您可以在左右对称地调整百分比。

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

然后您可以调整 % 以使其尽可能宽。

于 2016-02-16T08:59:35.627 回答