FIDDLE

Question

这里有一个像这样的父div

.div parent{
width:100%;
height:100%;
text-align:center;
}
.div child{
width:10%;
height:10%;
}

在响应式网络移动设备中，子div不垂直对齐中间如何对齐中间？请帮帮我..

感谢。

Answer 1

尝试添加：

.div parent{
vertical-align: middle;
width:100%;
height:100%;
text-align:center;
}

Answer 2

您写的.div parent似乎是无效选择器，如果您尝试选择div类parent，则应使用div.parent选择diplay:table-cell;（同样适用于您的孩子div ）。

试试这个;

将.parent应用于vertical-align:middle div，以便它能够将其子项垂直对齐。

然后将div.parent{ width:100%; height:100%; text-align:center; display:table-cell; vertical-align:middle; }应用于相同的内容以使子元素垂直居中

{{1}}

Answer 3

FIDDLE

这是另一种选择，使用CSS表

HTML

<div class='table'>
    <div class='row'>
        <div class='cell'>
            <div>Child</div>
        </div>
    </div>
</div>

CSS

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.table {
    display:table;
    table-layout:fixed;
    width:100%;
    height:100%;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
    border:1px solid grey;
    vertical-align:middle;
    text-align:center;
}
.cell div {
    background:red;
    display:inline-block;
    margin:0 auto;
}

Answer 4

我知道这篇文章已经过时了，但这是Flex的另一种方法（也可在CodePen中使用 - http://codepen.io/KErez/pen/kXzYAj）：

HTML：

<div class='a'>
  <div class='b'>
    Inner
  </div>
</div>

CSS（颜色仅用于清楚地显示框）：

.a {
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #ffffff;
  background-color: #223344;
  width: 100%;
  height: 100%;
}

.b {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 75px;
  height: 100px;
  background-color: #999999;
  color: #00ff00;
}

Answer 5

我多次使用的非常简单的解决方案。

＆＃13;

.a {
  width: 300px;
  height: 300px;
  background-color:#666;
}

.b {
  margin:auto;
  width: 75px;
  height: 100px;
  top: calc(50% - 50px);
  text-align:middle;
  position: relative;
  background-color:#111;
}

＆＃13;

<div class='a'>
  <div class='b'>
  </div>
</div>

＆＃13;

垂直对齐中间问题

5 个答案:

FIDDLE