Question

垂直和水平居中可能是布局页面最烦人的事情之一即使找到了很多解决方案See This和This，我也看不出任何适合我的问题。
我的问题在JSFiddle显示。

我尝试了这个用于垂直的，它没有用。垂直的任何其他？

out {
    display: table;
}

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

Answer 1

我通过添加

水平对齐您的按钮

margin-right:33%;
margin-left:33%;

现在关于你的桌子，我把它相对于div定位并给它一个前50％。

<强> EXAMPLE FIDDLE

编辑：另一种将表格放在div中的方法是给它边距（上，右，左）以便更好地定位。

希望这有帮助

Answer 2

如果你想垂直和水平居中，here是一个jsFiddle。

#cdiv {
    background-color: #FFFF00;
    color: #000000;
    width: 300px;
    height: 200px;
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -150px;
}

解决方案取自：Tutorialzine

Answer 3

这将在给定区域中垂直和水平居中任何div。你需要一些数学才能使它恰到好处。这是一个CodePen：http://codepen.io/anon/pen/xbzgyO

HTML：

<div id="mydiv">
<!--Content you want centered goes here-->
</div>

CSS：

#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:30em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -9em; /*set to a negative number 1/2 of your width*/
    background-color:#222126;
}

希望它有所帮助！

垂直和水平居中的东西

3 个答案: