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

概述我有一个< div id =“wrapper”>我的整个网站内容将在其中存在的容器.我试图通过使用css属性垂直和水平地使div中心,如margin：0 auto;在#wrapper上. #wrapper{ width:500px; height:500px; margin:0 auto; background:#f7f7f7;} 通过使用上面的CSS,我可以使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/

总结

以上是内存溢出为你收集整理的html – 制作视角的div中心 – 水平和垂直全部内容，希望文章能够帮你解决html – 制作视角的div中心 – 水平和垂直所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。