垂直和水平居中某物

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%。

小提琴示例

编辑：另一种在 div 中放置表格的方法是为其设置边距（顶部、右侧、左侧）以便更好地定位。

希望这可以帮助

Answer 2

如果你想垂直和水平居中一些东西，这里是一个 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;
}

希望能帮助到你！