无法将元素放置在绝对定位的div中

Question

HTML

<div class="footer">
  <div class="icon"></div>
</div>

CSS

.footer {
  width: 400px;
  height: 58px;
  background: #ccc;
  overflow: hidden;
  line-height: 82px;
}

.icon {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: #41c363;
  margin: 0 auto;
}

我正在尝试使用HTML和CSS实现上图中所示的UI。 不知何故，我无法将图标类居中对齐。

Fiddle

Answer 1

试试这个css

将display: flex;，align-items: center;添加到.footer类

.footer {
width: 400px;
display: flex;
align-items: center;
height: 58px;
background: #ccc;
overflow: hidden;
line-height: 82px;
}

fiddle

＆＃13;

＆＃13;

.footer {
    width: 400px;
    display: flex;
    align-items: center;
    height: 58px;
    background: #ccc;
    overflow: hidden;
    line-height: 82px;
}

.icon {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: #41c363;
  margin: 0 auto;
}

＆＃13;

<div class="footer">
  <div class="icon"></div>
</div>

＆＃13;

＆＃13;

＆＃13;