我拿不到顶栏中央的图像(LOGO)！！我试了所有的方法，我用了align-self: center;,display:block;，但没有成功！！我不知道我错过了什么！
codesandbox链接到代码，以便更好地查看
The code:个
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="مرحبا">
<meta name="description" content="">
<style>
.mail {
justify-content: center;
align-content: center;
align-items: center;
}
.headerContainer{
width: 100%;
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
align-self: center;
margin-bottom: 50px;
background-color: black;
}
.logo-image-cont{
align-content: center;
align-items: center;
align-self: center;
}
.logo-image {
width: 20%;
height: 10%;
}
</style>
</head>
<body>
<div class="mail">
<header class="headerContainer">
<div class="logo-image-cont">
<img
src="https://i.ibb.co/jwjBMnS/Kia-logo.png"
class="logo-image"
/>
</a>
</div>
</header>
</div>
</body>
</html>