html - 如何将一个元素与其他三个元素居中并使它们响应？

Question

如何在任何屏幕上将具有 3 个 .profilebox 元素的 div 居中？并使其响应？

• 大屏幕:一行显示我的 3 个元素
• 笔记本电脑屏幕:两行(第一行有 2 个元素，下面有 1 个元素)
• 平板电脑和移动设备:3 行，每行一个元素垂直对齐(居中)

你可以在这里查看我想要的:

HTML:

<div class="container" style="max-width: 1300px;">
   <div class="row">
     <div class="centerDiv">
       <div class="profilebox ">
         <div class="profileInfo">
             <h3 class="box-shadow">Errore Aethiopia dolorum amni</h3>
         </div>
       </div> 
     </div>
</div>

我有 3 个 div 的 .profilebox 用我的图像 + 标题渲染 3 个框。

CSS:

.centerDiv {
  padding-bottom: 200px;
  padding-top: 100px;
  margin-right: 0 auto;
  margin-left: 0 auto;
}

.profilebox {
  width: 350;
  height: 210;
  cursor: pointer;
  display: inline-table;
  margin-bottom: 100px;
  background-image: url("");
  background-position: center center;
  background-size: cover;
  position: relative;
}

.profilebox .profileInfo {
  bottom: 0;
  height: 50px;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
  width: 88%;
}

有了这段代码，我的盒子就设计好了。我的 img 和 title 位于正确的位置。现在唯一的事情就是让它在任何情况下都居中。我是网络开发的初学者，有些东西现在在我的代码中可能没有意义。非常感谢您的帮助。

Answer 1

您可以使用 CSS flexbox

.container{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
}
.profile-box{
  width:500px;
  height:300px;
  margin:20px;
  border:2px solid #000;
}
.profile-box{
  position: relative;
}
.profile-box p{
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
}

<div class="container">
  <div class="profile-box">
    <p>profile box</p>
  </div>
  <div class="profile-box">
    <p>profile box</p>
  </div>
  <div class="profile-box">
    <p>profile box</p>
  </div>
</div>