How to center an element with three others and make them responsive? - html

Question

How can I center a div with 3 .profilebox elements on any screens? and make it responsive?
• Big screens: One row with my 3 elements
• laptop screens: Two rows (2 elements on the first row, 1 element below)
• Tablet and mobile: 3 rows with one element per row vertically align (centered)
You can check what I want here:
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>
And I have 3 divs .profilebox rendering 3 boxes with my image + title.
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%;
}
With this code, my box is well designed. My img and title are in the right place. The only thing now is to make it centered in any situation.
I am a beginner in web development, some things may not be meaningful in my code right now. thanks a lot for your help.

Answer 1

You can use 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>

Answer 2

If you would like to use bootstrap, refer the following -
You could simply use the classes col-xl-4 col-lg-6 col-md-6 col-sm-12 as follows -
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
ProfileBox
</div>
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
ProfileBox
</div>
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
ProfileBox
</div>
</div>
</div>
You will finally get 3 elements on extra large screens, 2 on large & medium screens & 1 on small screens in each row.
To see it live with resizing, check it here.
Note: You don't need to worry about different browsers if you use bootstrap.