Html 纵向对齐中间问题

这里有一个像这样的父div

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

在响应web移动设备中，子div不是垂直居中对齐我如何对齐居中？？请帮帮我

---

谢谢。

您已经编写了

。div parent

似乎是一个无效的选择器，如果您试图用class

parent

选择一个

div

，则应使用

div.parent

（同样适用于您的子div）

试试这个

应用

diplay：表格单元格

到

.parent

div，这样它就能够将其子项垂直对齐到中间

然后将

vertical align:middle

应用于该元素，使子元素垂直居中

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

尝试添加：

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

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

HTML

---

我知道这篇文章很老，但这里有另一种使用

Flex

（也可以在CodePen中找到）的方法：

HTML:

---

非常简单的解决方案，我已经用过很多次了。

.a{
宽度：300px；
高度：300px；
背景色：#666；
}
.b{
保证金：自动；
宽度：75px；
高度：100px；
顶部：calc（50%-50px）；
文本对齐：中间对齐；
位置：相对位置；
背景色：#111；
}

你能说说你的问题吗？div很难垂直对齐。如果你能逃脱惩罚，你能把它放在桌子上吗？垂直对齐很容易与桌子对齐。

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

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;
}

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

.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;
}