Question

我在bootstrap中创建一个站点，我想知道如何在父div中垂直居中两个子div。我知道这可能很简单，但我已经尝试了一切，但它不会起作用。

fd

Answer 1

尝试保证金：自动

* {
  border: 1px solid #ddd;
}

section {
  padding: 100px 0;
  margin: auto
}
.col-md-6{
  margin: auto
}

对于IE9和IE10将display：table放到parent div并设置属性vallign =＆＃34; middle＆＃34 ;; display：table-cell to child element

vallign是旧浏览器以及一些新浏览器所支持的基本属性

Answer 2

您可以始终使用display: flex;

执行此操作

JS Fiddle

.container {
    display:flex;
    width:100%;
    align-items: center;
    justify-content: center;
    height: 400px;
  border: 4px solid black;
}
.container div {
    display:flex;
    align-items: center;
    justify-content: center;
}

.container > div {
    width: 40%;
    background-color: red;
    height: 221.5433px;
}

.container > div + div {
    width: 40%;
    background-color: brown;
    height: 278.8431px;
}

<div class="container">
    <div>centered</div>
    <div>centered</div>
</div>

Answer 3

我们知道父div的高度吗？如果是这样，你可以像here

那样做

.row {
    justify-content: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

请参阅here了解结果。

如何在父DIV中垂直居中两个子DIV

3 个答案: