我正在尝试在任何屏幕尺寸的页面上居中显示一行图像。
.content img {
width: 30%;
height: auto;
}
.content {
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}<body class="body_background">
<div class="content">
<a href="/index.html">
<img src="http://lorempixel.com/400/200/"></img>
</a>
<a href="/index.html">
<img src="http://lorempixel.com/400/200/"></img>
</a>
<a href="/index.html">
<img src="http://lorempixel.com/400/200/"></img>
</a>
</div>
<!-- video -->
<div class="container">
<video autoplay loop muted>
<source src="background.mp4" type="video/mp4">
</video>
</div>
</body>图像当前在 Y 方向居中。它们不在 x 中心，除非我使用 text-align: center 但边距不均匀。
最佳答案
试试 flexbox 模型: 容器 div 应该有:
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
padding-top:somevalue;
关于html - 如何让一行图片成为纵横居中的div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56614779/