我已经看到了关于如何将块元素居中的一百万个问题,似乎有几种流行的方法可以做到,但它们都依赖于固定的像素宽度。然后是margin:0 auto
或绝对/相对定位和left:50%; margin-left:[-1/2 width];
等。如果元素的宽度设置为%,我们都知道这不起作用。
真的没有办法以真正流畅的方式做到这一点吗?我正在谈论使用%
宽度(不设置十几个媒体查询的固定宽度越来越小)。
注意:有很多解决方案使用热门词“响应”,但不回答我的问题(因为他们无论如何都使用固定宽度)。这是an example。
更新 我差点忘了:你如何处理限制居中元素的最大宽度并仍然保持在中心?在@ smdrager的回答下看到我的评论。现实生活中的例子。我想要一个弹出消息或一个灯箱效果,其中包含一段文本在窗口中居中显示,文本根据宽度流畅地换行。但我不希望文本框在文本难以阅读的地方伸展得太远(想象一个4英尺的屏幕,其中三个段落延伸到一行文本上)。如果为大多数方法添加最大宽度,则在达到最大宽度时,居中框将停止居中。
答案 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%;
}
答案 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)
这样的事情可能是吗?
<div class="random">
SOMETHING
</div>
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%;
然后你可以调整%以使其尽可能宽。