我有一个< div id =“wrapper”>我的整个网站内容将在其中存在的容器.我试图通过使用css属性垂直和水平地使div中心,如margin：0 auto;在#wrapper上.
#wrapper
{
width:500px;
height:500px;
margin:0 auto;
background:#f7f7f7;
}
通过使用上面的CSS,我可以使div(顶部中心)的屏幕,但如何使其中心(垂直).当我在firefox中缩小时,我的div将在顶部中心缩小,但是我想要的是它应该始终存在于垂直和水平的屏幕中心.
任何人都可以建议我如何获得这样的布局.
提前致谢.
解决方法
#wrapper
{
width:500px;
height:500px;
margin:0 auto;
background:#f7f7f7;
position:absolute;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-250px;
}
为什么这样工作？
嗯,基本上你有一个绝对定位的元素在dom.这意味着您可以将其定位到任何您想要的位置,如果您没有相对位置的元素作为父级,则左侧和顶部将距离文档的左/顶原点的距离.
分配左：50％和上：50％使此元素始终位于屏幕的中心,但在中心,您会发现元素的左上角.
如果您有固定的宽度/高度,您可以轻松地将中心点“翻译”为实际上是包装器div的中心,给出负余量左边距和边距顶点(因此借助于一些非常简单的基本数学值将为 – (width / 2)和 – (height / 2))
编辑
您也可以轻松地使用flexBox进行中心,加上(一个大的),您不需要指定w / h,即：
body { /* can also be whatever container */
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
#wrapper {
/* whatever style u want */
}
