Question

这就是我想要的：

以下是我迄今所做的事情：

我不知道怎么做更好的方法是如何将div放在面板中，继续html：

<section id="purchases-dashboard" class="container">

    <div class="dashboard-options row panel">

        <div class="col-md-4 text-center dashboard-option">

            <img src="http://www.nucanorthtexas.com/wp-content/uploads/2013/11/supplier-icon.png" alt="Proveedores">

            <p>Proveedores</p>

        </div>
        <div class="col-md-4 text-center dashboard-option">

            <img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/256/inventory-maintenance.png"
                 alt="Supplier">

            <p>Productos</p>

        </div>
        <div class="col-md-4 text-center dashboard-option">

            <img src="http://www.iconshock.com/img_jpg/SUPERVISTA/accounting/jpg/256/inventory_icon.jpg" alt="Supplier">

            <p>Inventario</p>

        </div>

    </div>

</section>

和css：

.dashboard-options {
    width: 1000px;
    height: 300px;

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}

.dashboard-option > img {

    width: 170px;
    height: 140px;

}

我需要知道如何垂直居中.dashboard-option类div ...请注意我将.dashboard-options div居中。

Answer 1

我只想将padding-top: 75px;添加到.dashboard-options

Answer 2

您可以使用translate属性简单地将元素垂直居中;你不会惹恼margin或padding，这很容易。

.class {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

Here's an example，上面的代码用于垂直和水平中心和元素，位于另一个位于absolute的内部。多个元素的Here's an example 垂直居中。

＆＃13;

html, body {
    margin: 0;
    padding: 0;
}

.dashboard-options {
    width: 100%;
    height: 300px;
    background: red;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.dashboard-option {
    background: blue;
    height: 50px;
    width: 50px;
    float: left;
    margin: 0 auto;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    position: relative;
}

＆＃13;

<div class="dashboard-options">
    <div class="dashboard-option"></div>
</div>

＆＃13;

Answer 3

只需height: auto为padding: 20px 0做.dashboard-options 并删除

bottom: 0; 
top: 0;
left: 0;
right: 0;

因为您有width和margin

Here is a fiddle

UPD：

fixed fiddle

Answer 4

此课程将垂直居中：

.vert {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

垂直居中另一个居中的div

4 个答案: