Question

我对前端开发者来说比较新，所以有点失去了我怎么能这样做。我创建了一个包含滑块和一些图像的容器。我的主管有一个巨大的屏幕，所以很明显屏幕底部会有空的空间。所以他不想要那个。相反，他希望容器根据用户屏幕的大小水平和垂直居中。

如何使用尽可能少的代码正确执行此操作？我相信有jQuery插件但想看看是否有更好的方法或者这样做是否有意义？

Answer 1

由于CSS的基于流的特性，没有Javascript这只能通过在固定容器中应用position:absolute' and top：50％`固定中心元素的垂直大小来完成，并且然后使用负边距来抵消容器。 Click here for JSFiddle Sample

或者，使用display:table-cell可以达到相同的效果，但这有点混乱并且会给你带来很大的灵活性。在这里的另一个答案中已经提供了样本，所以我将节省自己的努力：）

Answer 2

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

由于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。

Answer 3

试试这个：

<强> 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-horizontally-and-vertically/

尽管用户屏幕大小，我怎样才能确保我的容器水平和垂直居中？

3 个答案: