无法将元素定位在绝对定位 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。不知何故，我无法使图标居中 class 居中垂直对齐。

Fiddle

Answer 1

试试这个 css

将 display: flex;、align-items: center; 添加到 .footer class

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

fiddle

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

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

无法将元素定位在绝对定位 div 内

Unable to position element inside an absolute positioned div

css

css-position

overflow