絶対位置の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; 
} 

私は上記の画像のようにUIを実現しようとしていますHTMLとCSSを使用します。 どういうわけか、私はアイコンのクラスを中心に垂直に整列させることができません。

Fiddle

Answer 1

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

​​ .footerにクラス、 display: flex;を追加し、このCSSを試してみてください210