这个问题在这里已经有答案了：
如何在浏览器窗口中间设置一个元素？
（18个答案）
（18个答案）
两年前关闭的
我有一个<；div id=“包装器”>我的整个网站内容将显示在其中的容器。我尝试使用css属性，如margin:0auto，使div垂直和水平居中；在#包装器上
包装器
{
宽度：500px；
高度：500px；
保证金：0自动；
背景：#f7f7f7；
}
通过使用上面的css，我可以使div位于屏幕的顶部中心，但如何使其位于中心（垂直）。当我在firefox中缩小时，我的div将在顶部中间缩小，但我想要的是，它应该始终从垂直和水平方向显示在屏幕的中心
谁能告诉我怎么才能得到这样的布局
提前谢谢
包装器
{
宽度：500px；
高度：500px；
保证金：0自动；
背景：#f7f7f7；
位置：绝对位置；
左：50%；
最高：50%；
左边距：-250px；
利润上限：-250px；
}
{
宽度：500px；
高度：500px；
保证金：0自动；
背景：#f7f7f7；
位置：绝对位置；
左：50%；
最高：50%；
左边距：-250px；
利润上限：-250px；
}
演示：http://jsfiddle.net/fJtNQ/
为什么这样做有效？
基本上，dom中有一个绝对定位元素。这意味着您可以将其定位到任何您想要的位置，如果您没有相对定位的元素作为父元素，left和top将是距文档左/上原点的距离
分配left:50%和top:50%可使此元素始终位于屏幕的中心，但在中心可以找到元素的左上角
如果你有固定的宽度/高度，你可以通过给左边的空白和顶部的空白（因此借助一些非常简单的基础数学，它们的值将是-（宽度/2）和-（高度/2））
编辑
您还可以使用flexbox轻松居中，另外（一个大的），您不需要指定w/h，即：
body{/*也可以是任何容器*/
显示：-webkit flex；
显示器：flex；
-webkit对齐项目：居中；
对齐项目：居中；
-webkit内容：中心；
证明内容：中心；
}
#包装纸{
/*你想要什么款式都行*/
}
演示：https://jsfiddle.net/00utf52o/