html – 制作视角的div中心 – 水平和垂直

我有一个< 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;
}

演示：http://jsfiddle.net/fJtNQ/

为什么这样工作？

嗯,基本上你有一个绝对定位的元素在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 */
}

演示：https://jsfiddle.net/00utf52o/

原文地址：https://www.jb51.cc/html/231355.html