Html 如何将一个元素与其他三个元素放在一起，并使它们具有响应性？

如何将

div

与3个

.profilebox

元素集中在任何屏幕上？并使其响应

•大屏幕：一行显示我的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>

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

如果要使用引导，请参考以下内容-

您可以简单地使用以下类

col-xl-4 col-lg-6 col-md-6 col-sm-12

-

档案盒
档案盒
档案盒

您可以使用

.container{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.配置文件框{
宽度：500px；
高度：300px；
利润率：20px；
边框：2倍实心#000；
}
.配置文件框{
位置：相对位置；
}
.个人资料框p{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
保证金：0；
}

剖面框

剖面框

剖面框

您是否考虑过flexbox或网格布局？编辑：虽然看着你的照片，内联块和文本对齐中心可能就是你所需要的。你为什么选择手工制作的css而不是基于谷歌的漂亮框架呢？这些都有一些基本的功能，比如你的请求，它们都很轻使用引导类-

col-xl-4 col-lg-6 col-md-6 col-sm-12

@Jean-Paul我认为对于这样的布局来说，即使是轻量级的浏览器，也有很大的杀伤力，除非您还计划利用该库的其他功能。您的目标浏览器是什么？不错，但这需要固定大小的框。不过，我不喜欢绝对定位段落。我认为这可以解决他的问题。绝对定位的段落只是为了澄清一个想法，在一个相当大的库中浏览这个问题似乎并不合适。我同意Bootstrap很好，但这里不需要（或要求）。@isherwood，你的观点完全正确&这是一个kbs在网络上的问题；但这只是一个可能的解决方案&我们可以压缩一个库来减少它的开销size@TusharWalzade这真的取决于Gustave的目标，如果他想创建一个包含组件的完整网站，精美的导航和响应比是的，bootstrap或任何其他库都是一个不错的选择，如果他只是想了解它在普通CSS中是如何工作的，那么向浏览器扔一个20KB+的库似乎不是一个好主意

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