将响应式 div 在 100% div 中水平和垂直居中的最佳方法 [重复]答案

【问题标题】：Best method to center a responsive div horizontally and vertically in a a 100% div [duplicate]将响应式 div 在 100% div 中水平和垂直居中的最佳方法 [重复]
【发布时间】：2014-08-05 10:02:33
【问题描述】：

如何在具有 100% 视口大小的 div 中水平和垂直居中动态 div？

html

<div class="outer-div">
    <div class="inner-div"></div>
</div>

css

html, body {
    height: 100%;
}

.outer-div {
    height: 100%;
    width: 100%;
    background-color: #f3f3f3;
}

.inner-div {
    width: 80%;
    height: 80%;
    background-color: #ccc;
}

【问题讨论】：

css-tricks.com/centering-in-the-unknown smashingmagazine.com/2013/08/09/…

标签： html css

【解决方案1】：

Demo

css

html, body {
    height: 100%;
    margin:0;
    padding:0
}

.outer-div {
    height: 100%;
    width: 100%;
    background-color: #f3f3f3;
}

.inner-div {
    width: 80%;
    height: 80%;
    background-color: #ccc;
    margin:auto;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

【讨论】：

【解决方案2】：

重要的是

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

这将适用于具有position: relative 或body 的第一个父级（如果没有其他）。

【讨论】：