Centering flexbox layout without using justify-content:center;

Question

I am trying to center all the contents in my flex-container vertically in the middle of my page but I can't seem to get it to work. The only thing that made sense to me was to change the justify-content:flex-wrap to justify-content:center, but I cant do that because then it messes with my images being wrapped properly. Any other suggestion on how I can center the contents in my flex-container? Anything helps, thanks.

/*Fonts*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600);
@import url(https://use.fontawesome.com/releases/v5.0.8/css/all.css);

/*Body*/
body {
	font-family: "Open Sans", Arial, sans-serif;
	background-color: #fefefe;
	padding-bottom: 3rem;}

/*Profile Picture*/
.profile-picture {
  display: flex;
  margin-top: 55px;
  margin-bottom: 35px;
  display: inline-block;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #f1f1f1;}
.image {
  background-image: url('https://www.dropbox.com/s/8dtg60sbha99x2o/Photo%202018-02-05%2C%209%2026%2043%20AM.jpg?raw=1');}

/*Profile Name*/
.profile-name {
  text-align:center; 
  margin-top:-20px; 
  margin-bottom:35px; 
  font-weight:bold;}

/*User Name*/
.user-name {
  text-align:center; 
  margin-top:-30px; 
  margin-bottom:35px; 
  color:rgba(1,1,1,0.35);}

/*Follow Button*/
.follow-button-position {
  text-align:center;
  margin-bottom:55px;
  margin-top:-10px;}
.follow-button {
  text-align:center;
  padding-top:7.5px;
  padding-bottom:7.5px; 
  padding-left:25px; 
  padding-right:25px;
  border-radius:2px;
  background-color:rgba(1,1,1,0); 
  border-style:solid; 
  border-color:#af985a; 
  border-width:1px;
  color:#af985a;}
.follow-button:hover {
  cursor:pointer;}

/*Posts*/
.flex-container {
  display: flex;
  justify-content: flex-wrap;
flex-wrap: wrap;}

img {
    max-width:270px;
  height:auto;
padding:15px;}

<div class="flex-container">
  <div class="profile-picture image">
  </div>
</div>

<div class="profile-name">
  <p>cole gwoz</p> 
</div>

<div class="user-name">
  <p>colegwoz</p>
</div>

<div class="follow-button-position">
  <button class="follow-button">Follow</button>
</div>

<div class="flex-container">
  <div>
<img src="https://www.dropbox.com/s/4c05cegbonfqo5k/Photo%202018-03-03%2C%202%2020%2022%20PM.jpg?raw=1"></div>
  
  <div><img src="https://www.dropbox.com/s/qzuhelo4lf7eyu0/Photo%202018-01-01%2C%204%2038%2037%20PM.jpg?raw=1"></div>
  
  <div><img src="https://www.dropbox.com/s/8dtg60sbha99x2o/Photo%202018-02-05%2C%209%2026%2043%20AM.jpg?raw=1"></div>
  
  <div><img src="https://www.dropbox.com/s/qzuhelo4lf7eyu0/Photo%202018-01-01%2C%204%2038%2037%20PM.jpg?raw=1"></div>
  
  <div><img src="https://www.dropbox.com/s/qzuhelo4lf7eyu0/Photo%202018-01-01%2C%204%2038%2037%20PM.jpg?raw=1"></div>
  
</div>

Answer 1

Okay here is exactly what you posted with only the flex-direction change to achieve the pinterest "collage" layout. One caveat when using this layout, it only works if the container has a fixed height. Infinite scrolling and dynamically added images won't work without some JS code to resize the parent:

/*Fonts*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600);
@import url(https://use.fontawesome.com/releases/v5.0.8/css/all.css);

/*Body*/
body {
	font-family: "Open Sans", Arial, sans-serif;
	background-color: #fefefe;
	padding-bottom: 3rem;}

/*Profile Picture*/
.profile-picture {
  display: flex;
  margin-top: 55px;
  margin-bottom: 35px;
  display: inline-block;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #f1f1f1;}
.image {
  background-image: url('https://www.dropbox.com/s/8dtg60sbha99x2o/Photo%202018-02-05%2C%209%2026%2043%20AM.jpg?raw=1');}

/*Profile Name*/
.profile-name {
  text-align:center; 
  margin-top:-20px; 
  margin-bottom:35px; 
  font-weight:bold;}

/*User Name*/
.user-name {
  text-align:center; 
  margin-top:-30px; 
  margin-bottom:35px; 
  color:rgba(1,1,1,0.35);}

/*Follow Button*/
.follow-button-position {
  text-align:center;
  margin-bottom:55px;
  margin-top:-10px;}
.follow-button {
  text-align:center;
  padding-top:7.5px;
  padding-bottom:7.5px; 
  padding-left:25px; 
  padding-right:25px;
  border-radius:2px;
  background-color:rgba(1,1,1,0); 
  border-style:solid; 
  border-color:#af985a; 
  border-width:1px;
  color:#af985a;}
.follow-button:hover {
  cursor:pointer;}

/*Posts*/
.flex-container {
  display: flex;
  justify-content: flex-wrap;
flex-wrap: wrap;}

img {
    max-width:270px;
  height:auto;
padding:15px;}

.img-cont {
  flex-direction: column;
  max-height: 900px;
}

<div class="flex-container">
  <div class="profile-picture image">
  </div>
</div>

<div class="profile-name">
  <p>cole gwoz</p> 
</div>

<div class="user-name">
  <p>colegwoz</p>
</div>

<div class="follow-button-position">
  <button class="follow-button">Follow</button>
</div>

<div class="flex-container img-cont">
  <div>
<img src="https://www.dropbox.com/s/4c05cegbonfqo5k/Photo%202018-03-03%2C%202%2020%2022%20PM.jpg?raw=1"></div>
  
  <div><img src="https://www.dropbox.com/s/qzuhelo4lf7eyu0/Photo%202018-01-01%2C%204%2038%2037%20PM.jpg?raw=1"></div>
  
  <div><img src="https://www.dropbox.com/s/8dtg60sbha99x2o/Photo%202018-02-05%2C%209%2026%2043%20AM.jpg?raw=1"></div>
  
  <div><img src="https://www.dropbox.com/s/qzuhelo4lf7eyu0/Photo%202018-01-01%2C%204%2038%2037%20PM.jpg?raw=1"></div>
  
  <div><img src="https://www.dropbox.com/s/qzuhelo4lf7eyu0/Photo%202018-01-01%2C%204%2038%2037%20PM.jpg?raw=1"></div>
  
</div>

Answer 2

Fixed your profile image centering as well. Maybe I'm not understanding the question? Can you provide screenshots of what it currently looks like and what you want it to look like? The container can be centered, but with the way you are setting a max-width on the images, it is causing them to not be centered in the container. Do you just want a way to make sure your images are centered on the page in two columns? Should the columns grow with the screen size?

/*Fonts*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600);
@import url(https://use.fontawesome.com/releases/v5.0.8/css/all.css);

/*Body*/

body {
  font-family: "Open Sans", Arial, sans-serif;
  background-color: #fefefe;
  padding-bottom: 3rem;
}


/*Profile Picture*/

.profile-picture {
  display: flex;
  display: inline-block;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #f1f1f1;
  margin: 55px auto 35px auto;
}

.image {
  background-image: url('https://www.dropbox.com/s/8dtg60sbha99x2o/Photo%202018-02-05%2C%209%2026%2043%20AM.jpg?raw=1');
}


/*Profile Name*/

.profile-name {
  text-align: center;
  margin-top: -20px;
  margin-bottom: 35px;
  font-weight: bold;
}


/*User Name*/

.user-name {
  text-align: center;
  margin-top: -30px;
  margin-bottom: 35px;
  color: rgba(1, 1, 1, 0.35);
}


/*Follow Button*/

.follow-button-position {
  text-align: center;
  margin-bottom: 55px;
  margin-top: -10px;
}

.follow-button {
  text-align: center;
  padding-top: 7.5px;
  padding-bottom: 7.5px;
  padding-left: 25px;
  padding-right: 25px;
  border-radius: 2px;
  background-color: rgba(1, 1, 1, 0);
  border-style: solid;
  border-color: #af985a;
  border-width: 1px;
  color: #af985a;
}

.follow-button:hover {
  cursor: pointer;
}

/*Posts*/

.img-cont {
    width: 50%;
    margin: 0 auto;
    flex-direction: column;
    height: 900px;
    min-width: 950px;
}

.flex-container {
  display: flex;
  justify-content: flex-wrap;
  flex-wrap: wrap;
}

img {
  max-width: 270px;
  height: auto;
  padding: 15px;
}

<div class="flex-container">
  <div class="profile-picture image">
  </div>
</div>

<div class="profile-name">
  <p>cole gwoz</p>
</div>

<div class="user-name">
  <p>colegwoz</p>
</div>

<div class="follow-button-position">
  <button class="follow-button">Follow</button>
</div>

<div class="flex-container img-cont">
  <div>
    <img src="https://www.dropbox.com/s/4c05cegbonfqo5k/Photo%202018-03-03%2C%202%2020%2022%20PM.jpg?raw=1"></div>

  <div><img src="https://www.dropbox.com/s/qzuhelo4lf7eyu0/Photo%202018-01-01%2C%204%2038%2037%20PM.jpg?raw=1"></div>

  <div><img src="https://www.dropbox.com/s/8dtg60sbha99x2o/Photo%202018-02-05%2C%209%2026%2043%20AM.jpg?raw=1"></div>

  <div><img src="https://www.dropbox.com/s/qzuhelo4lf7eyu0/Photo%202018-01-01%2C%204%2038%2037%20PM.jpg?raw=1"></div>

  <div><img src="https://www.dropbox.com/s/qzuhelo4lf7eyu0/Photo%202018-01-01%2C%204%2038%2037%20PM.jpg?raw=1"></div>

</div>

Answer 3

just add css .flex-container > div{margin:0 auto}

/*Fonts*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600);
@import url(https://use.fontawesome.com/releases/v5.0.8/css/all.css);

/*Body*/
body {
	font-family: "Open Sans", Arial, sans-serif;
	background-color: #fefefe;
	padding-bottom: 3rem;}

/*Profile Picture*/
.profile-picture {
  display: flex;
  margin-top: 55px;
  margin-bottom: 35px;
  display: inline-block;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #f1f1f1;}
.image {
  background-image: url('https://www.dropbox.com/s/8dtg60sbha99x2o/Photo%202018-02-05%2C%209%2026%2043%20AM.jpg?raw=1');}

/*Profile Name*/
.profile-name {
  text-align:center; 
  margin-top:-20px; 
  margin-bottom:35px; 
  font-weight:bold;}

/*User Name*/
.user-name {
  text-align:center; 
  margin-top:-30px; 
  margin-bottom:35px; 
  color:rgba(1,1,1,0.35);}

/*Follow Button*/
.follow-button-position {
  text-align:center;
  margin-bottom:55px;
  margin-top:-10px;}
.follow-button {
  text-align:center;
  padding-top:7.5px;
  padding-bottom:7.5px; 
  padding-left:25px; 
  padding-right:25px;
  border-radius:2px;
  background-color:rgba(1,1,1,0); 
  border-style:solid; 
  border-color:#af985a; 
  border-width:1px;
  color:#af985a;}
.follow-button:hover {
  cursor:pointer;}

/*Posts*/
.flex-container {
  display: flex;
  justify-content: flex-wrap;
flex-wrap: wrap;}
.flex-container > div{
margin:0 auto;
}
img {
    max-width:270px;
  height:auto;
padding:15px;}

<div class="flex-container">
  <div class="profile-picture image">
  </div>
</div>

<div class="profile-name">
  <p>cole gwoz</p> 
</div>

<div class="user-name">
  <p>colegwoz</p>
</div>

<div class="follow-button-position">
  <button class="follow-button">Follow</button>
</div>

<div class="flex-container">
  <div>
<img src="https://www.dropbox.com/s/4c05cegbonfqo5k/Photo%202018-03-03%2C%202%2020%2022%20PM.jpg?raw=1"></div>
  
  <div><img src="https://www.dropbox.com/s/qzuhelo4lf7eyu0/Photo%202018-01-01%2C%204%2038%2037%20PM.jpg?raw=1"></div>
  
  <div><img src="https://www.dropbox.com/s/8dtg60sbha99x2o/Photo%202018-02-05%2C%209%2026%2043%20AM.jpg?raw=1"></div>
  
  <div><img src="https://www.dropbox.com/s/qzuhelo4lf7eyu0/Photo%202018-01-01%2C%204%2038%2037%20PM.jpg?raw=1"></div>
  
  <div><img src="https://www.dropbox.com/s/qzuhelo4lf7eyu0/Photo%202018-01-01%2C%204%2038%2037%20PM.jpg?raw=1"></div>
  
</div>

Answer 4

justify-content: center; will do it. For flex-wrap it's flex-wrap: wrap;

If this isn't working for you, you can add a media query and switch the flex-container to flex-direction: column; and add align-items: center;