Question

我在jsfiddle.net/5tzk3/10使用了JsFiddle。我将其更改为将div显示为方形对话框（水平和垂直居中）。结果是jsfiddle.net/5tzk3/548。

如您所见，水平居中很容易，但我无法将其垂直居中。谁知道如何用纯CSS做到这一点？

以下编辑的代码：

<div class="blind">
    <div class="wrapper">
        <div class="main">
            I'm your div with an aspect-ratio of 1:1!
        </div>
    </div>
</div>

html, body, .blind {
    height: 100%;
    width: 100%;    
}

.blind {
    left: 0;
    position: fixed;
    text-align: center;
    top: 0;
}

.wrapper {
    display: inline-block;
    margin: auto;
    position: relative;
    width: 50%;
}

.wrapper:after {
    content: '';
    display: block;
    padding-top: 100%;
}

.main {
    background-color: rgb(0, 162, 232);
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0; 
}

Answer 1

将display: table用于父div，将display:table-cell; vertical-align: middle用于要垂直居中的内容div。

Answer 2

如果你有一个已知尺寸的元素，最常见的方法是使用定位首先定位top: 50%（将元素的上边缘放置50％）然后使用元素高度的一半的负top-margin（将其拉高一半的高度）。

举个例子，绝对将200x200元素死点放在您要使用的页面上：

.element{
    display: block;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    margin-top: -100px
}

或者，您可以在父母身上使用display: table和display: table-cell的组合来打开使用vertical-align的功能，尽管在布局时这有点令人讨厌周围的元素。

Answer 3

你可以删除绝对位置并使用display：table或带有伪元素的inline-block。

这里是两种方法的混合

1） html / body作为表格一个单元格 2）保留比率的内容和内容设置在中间的内容。

.ratio1-1 {
  width:25%;
    vertical-align:middle;
  margin:auto;
  background:turquoise;
}
.ratio1-1:before {
  content:'';
  padding:50% 0;
  width:0;
  display:inline-block;
  vertical-align:middle;
}
.ib {  
  display:inline-block;
  vertical-align:middle;
}

/* center body content as a table cell */
html {
  height:100%;
  width:100%;
  display:table;
}
body {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

<div class="ratio1-1">
  <div class="ib">content in middle</div>
  </div>

演示：http://codepen.io/gc-nomade/pen/pubFm

CSS垂直对齐div，同时保持纵横比

3 个答案: