CSS:在限制最大宽度的同时,以流体div为中心(没有px宽度)的响应方式?

时间:2013-07-09 13:52:49

标签: html css html5 css3 responsive-design

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

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

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

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

6 个答案:

答案 0 :(得分:40)

水平和垂直居中

实际上,以百分比为单位的高度和宽度使其更容易居中。您只需将左侧和顶部偏移一半未被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;}
}

答案 1 :(得分:16)

来自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

答案 2 :(得分:12)

我认为您可以对要居中的元素使用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无法正确处理)

答案 3 :(得分:1)

编辑:
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;
}

答案 4 :(得分:0)

这样的事情可能是吗?

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;,以确保它仅以这种方式居中,而不是从顶部开始。

答案 5 :(得分:0)

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

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

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

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