我想在窗口的中心放置一个div(with position:absolute;)元素。但我在这样做时遇到了问题,因为宽度未知。
我尝试了以下CSS代码,但它需要调整,因为宽度是响应的。
.center {
left: 50%;
bottom: 5px;
}
我怎样才能做到这一点?
我想在窗口的中心放置一个div(with position:absolute;)元素。但我在这样做时遇到了问题,因为宽度未知。
我尝试了以下CSS代码,但它需要调整,因为宽度是响应的。
.center {
left: 50%;
bottom: 5px;
}
我怎样才能做到这一点?
当前回答
响应式解决方案
如果您不需要支持IE8或更低版本,这里有一个很好的解决方案,可用于响应设计或未知尺寸。
.centered-axis-x {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
.外部{位置:相对;/*或绝对值*//*不必要的样式设置财产*/保证金:5%;宽度:80%;高度:500px;边框:1px纯红色;}.内部{位置:绝对;左:50%;顶部:50%;转换:转换(-50%,-50%);/*不必要的样式设置财产*/最大宽度:50%;文本对齐:居中;边框:1px纯蓝色;}<div class=“outer”><div class=“inner”>我总是居中<br/>无论我有多少文本、高度或宽度<br/>维度或我的父级也不相关</div></div>
这是一个JS Fiddle
线索是,剩下的:50%是相对于父对象的,而平移变换是相对于元素宽度/高度的。
这样,您就拥有了一个完全居中的元素,子元素和父元素都具有灵活的宽度。奖励:即使孩子比父母大,这也能奏效。
您也可以使用此选项垂直居中(同样,父级和子级的宽度和高度可以完全灵活(和/或未知)):
.centered-axis-xy {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
请记住,您可能还需要以转换供应商为前缀。例如-webkit转换:translate(-50%,-50%);
其他回答
这里有一个有用的jQuery插件来实现这一点。我在这里找到的。我不认为纯粹使用CSS是可能的。
/**
* @author: Suissa
* @name: Absolute Center
* @date: 2007-10-09
*/
jQuery.fn.center = function() {
return this.each(function(){
var el = $(this);
var h = el.height();
var w = el.width();
var w_box = $(window).width();
var h_box = $(window).height();
var w_total = (w_box - w)/2; //400
var h_total = (h_box - h)/2;
var css = {"position": 'absolute', "left": w_total + "px", "top":
h_total + "px"};
el.css(css)
});
};
HTML
<div id='parent'>
<div id='centered-child'></div>
</div>
CSS
#parent {
position: relative;
}
#centered-child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto auto;
}
http://jsfiddle.net/f51rptfy/
HTML格式:
<div class="wrapper">
<div class="inner">
content
</div>
</div>
CSS:
.wrapper {
position: relative;
width: 200px;
height: 200px;
background: #ddd;
}
.inner {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
width: 100px;
height: 100px;
background: #ccc;
}
这里还有更多的例子。
#内容{margin:0自动;显示:表格;float:none;}<body><div><div id=“content”>我是内容</div></div></body>
在寻找解决方案时,我得到了前面的答案,可以将内容以Matthias Weiler的答案为中心,但使用文本对齐:
#content{
position: absolute;
left: 0;
right: 0;
text-align: center;
}
它与谷歌Chrome和Firefox配合使用。