Html 水平和垂直创建视口的div中心

我有一个

容器，其中将显示我的整个网站内容。我尝试使用css属性，如

margin:0auto，使div垂直和水平居中；在#包装器上

#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中有一个绝对定位元素。这意味着您可以将其定位到任何您想要的位置，如果您没有相对定位的元素作为父元素，left和top将是距文档左/上原点的距离

分配

left:50%

和

top:50%

可使此元素始终位于屏幕的中心，但在中心可以找到元素的左上角

如果你有固定的宽度/高度，你可以通过给左边的

空白
和顶部的
空白
（因此借助一些非常简单的基础数学，它们的值将是
-（宽度/2）
和
-（高度/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 */
}

演示：
我使用jQuery

$(window).resize(function(){

    $('.className').css({
        position:'absolute',
        left: ($(window).width() - $('.className').outerWidth())/2,
        top: ($(window).height() - $('.className').outerHeight())/2
    });

});

// To initially run the function:
$(window).resize();


考虑使用
display:table
与
display:table单元格结合使用；垂直对齐：在单独的元素上居中对齐。因为CSS没有语义含义，所以它是一个可接受的解决方案

我给你举了个例子：

唯一的缺点是，与其他一些解决方案相比，它需要更多的标记，但它会随着内容而收缩和扩展。
对于需要相对于视口而不是“相对于父div”将子div居中的用户，这里有一个解决方案。这里提到的其他解决方案在这种情况下不起作用，因为它们倾向于使子div相对于父div居中

<div id="container">
  <div id="wrapper">Always center, No matter the parent div's position</div>
</div>

#wrapper {
 width:300px;
 height:300px;
 margin:0 auto;
 background:green;
 position:fixed;
 left:50%;
 top:50%;
 margin-left:-150px;
 margin-top:-150px;
}

#container {
  display: block;
  position: absolute;
  width: 400px;
  height: 400px;
  border: 1px solid red;
  bottom: 0;
  left: 0;
}


始终居中，无论父div的位置如何
#包装纸{
宽度：300px；
高度：300px；
保证金：0自动；
背景：绿色；
位置：固定；
左：50%；
最高：50%；
左边距：-150px；
利润上限：-150px；
}
#容器{
显示：块；
位置：绝对位置；
宽度：400px；
高度：400px；
边框：1px纯红；
底部：0；
左：0；
}

这里的演示
@stecb的答案适用于固定宽度/高度的工作

要将div或图像垂直放置在所有视口的中心并使其响应，请使用以下命令：

#elem-to-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#outer-elem {
    width: 100%;
    height: 100%;
    padding: 30px;
    background: #fafafa;
    position: relative;
}
#elem-to-center {
    width: calc(100% - 60px);
    max-height: calc(100% - 60px);

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

我只是用“变换”替换了“左边距”和“顶部距”

如果要在图元周围留有边距，请使用以下命令：

#elem-to-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#outer-elem {
    width: 100%;
    height: 100%;
    padding: 30px;
    background: #fafafa;
    position: relative;
}
#elem-to-center {
    width: calc(100% - 60px);
    max-height: calc(100% - 60px);

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

|

我发现这在响应视图中也很有用。
最简单、最干净的方法是使用视口大小设置高度、边距（和宽度，如果需要）

假设您希望容器的
高度
占据屏幕的60%（60vh），您可以将其余部分（40vh，因为视口的总高度=100vh）在上下边距之间等分，以便元素自动在中心对齐。

将
左边距
和
右边距
设置为
自动
，将确保容器水平居中


.container{
宽度：60vw；/*可选*/
高度：60vh；
保证金：20vh自动；
背景：#333；
}

过去，我使用的方法是将包装器放入另一个容器元素中。外部垂直居中，内部水平居中。这更好。我通常不喜欢人们只是发布一个JSFIDLE和没有解释的代码，只是为了最快地回答，但这是一个很好的答案，+1U你说得对，我使用的是mobile，就解决方案而言，我只是在1秒内回答了它。尽快解释：）@stecb记住，他接受了并不意味着你不应该解释发生了什么。至少添加一个链接，指向进行垂直对齐的教程。有推荐人很好这是一种可行的方法，但不建议将其作为最佳实践，因为如果视口小于您居中的元素，您将看不到整个元素，并且无法滚动！所以，小心点！更好的方法是使用margin:auto，例如，当你只能用css解决问题时，应该始终避免使用JavaScript。@stecb不仅是需要避免的事情，而且会让你看起来不酷。CSS一直都是为酷孩子设计的，所以应该缩短“你”这个词。应该避免将CSS用于可能是动态的、无法通过CSS解决的问题。当然，我也可以把一个正方形居中。。。但是如果这个正方形变得不一样……CSS解决方案要求您知道元素的宽度和高度。在响应式布局中，元素的宽度和高度会发生变化。若要添加到该布局中，请。。如果要正确地将elm垂直居中到视口，而不考虑滚动位置，则需要考虑其当前垂直滚动位置，并将其添加到顶部值。顶部：$（'.elm'）.css（$（顶部），（$（窗口）.height（）-$（elm）.outerHeight（））/2+$（窗口）.scrollTop（））您可以查看此链接
#元素到中心
对于大视口非常有效。但对于较小的视口，它会中断。如何将此解决方案转换为更小的视口？@GitauHarrison我刚刚检查了JSFIDLE，无法复制。也许你的风格不同。你能简单地解释一下你到底想达到什么目的吗？