html - 垂直和水平居中的东西

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;
}

希望能帮助到你！