css - 尽管用户屏幕大小，如何确保我的容器水平和垂直居中？

Question

我对前端开发人员比较陌生，所以对于如何去做这件事有点迷茫。我创建了一个包含滑块和一些图像的容器。我的主管有一个巨大的屏幕，所以显然屏幕底部会有空白空间。所以他不想那样。相反，他希望容器根据用户屏幕的大小水平和垂直居中。

我怎样才能用尽可能少的代码正确地做到这一点？我相信有 jQuery 插件，但想看看是否有更好的方法，或者这样做是否有意义？

Answer 1

由于 CSS 的基于流的特性，如果没有 Javascript，这只能在居中元素的垂直大小固定的情况下完成，通过position:absolute' and在固定容器内应用 top:50%`，然后使用负边距来偏移容器. 单击此处获取 JSFiddle 示例。

或者，使用 可以达到相同的效果display:table-cell，但这有点混乱，并且失去了很多灵活性。示例已在此处的其他答案中提供，因此我会省力:)

Answer 2

尝试这个：

HTML：

<div class="center"></div>

CSS：

.center {
   width: 300px;
   height: 300px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
   background-color: red;
}

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

将图像/Div 水平和垂直居中：

http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizo​​ntally-and-vertically/

Answer 3

您可以使用vertical-align属性轻松完成此操作。

由于垂直对齐仅在表格单元格中以所需的方式工作，因此这个带有display属性的技巧可以为您提供所需的效果。

#yourDiv {

    // give it a size
    width: 100px;
    height: 100px;

    margin: 0 auto;
}

html, body {
    height: 100%;
    width: 100%;
    padding: 0; margin: 0;
}

html {
    display: table;
}

body {    
    display: table-cell;
    vertical-align: middle;
}

看一个fiddle with demo。