Circle Div not centering with flexbox

Question

In my header I want a circle in the center of the screen and on the left a h 1 tag with my name that scales with it. I am trying to use flexbox with it but I can't find a way to center the circle if I tried to use justify-self: center but it wont work and I don't know what I am doing wrong.

I tried using margin: auto but that does not center my profile picture if I try it class name is in the way for the margin.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/home.css" rel="stylesheet">
<title>Portofolio</title> 
</head>
<body>
 <div class="header">
     <div class="name">
         <h1 class="name">Roel <span id="break"> Voordendag </span></h1>
     </div>
     <div class="profile-picture">
     </div>
  </div>
  <div class="about">
    <span class="about-text">
        <p>
        </p>
    </span>
</div>
</body>
</html>

SCSS

.header{
width: 100%;
display: flex;
@include breakpoint(flex){
    flex-direction: column-reverse;
}   
}


.header .profile-picture{
width:35%;
border-radius:50%;
padding-bottom:35%;

border-style: solid;    
border-width: thin;
border-color: $primary-color;
background-repeat: no-repeat;
background-size: cover;
background-image: url('https://www.istockphoto.com/photos/businessman');
position: relative;
align-self: center;
@include breakpoint(medium){
    width: 320px;
    height: 320px;
    padding-bottom: 0;
    justify-self: center;
}
}
.header .name{
color: $primary-color;
font-family: $primary-font;
font-size: 4vw;
text-align: center;
@include breakpoint(medium){
    justify-self: flex-start; 
    align-self: center;
    text-align: left;
} 
h1{
    margin: 0;
    padding: 0;
 }
}
#break{
@include breakpoint(medium){
    display:block;
}
}

Breakpoint

@mixin breakpoint($point) {
//laptops to big screens
@if $point == xlarge {
    @media (min-width: 1140px) { @content ; }
} 
//tablet in horizontal mode
@else if $point == large {
    @media (min-width: 992px) { @content ; }
}
//tablet vertical/big phones
@else if $point == medium{
    @media (min-width: 786px) { @content ; }
}
//phones
@else if $point == small {
    @media (min-width: 360px) { @content ; }
}
@else if $point == flex {
    @media (max-width: 786px) { @content ; }
}
}

Breakpoint flex is the point from where I want to use flexbox

Please post enough code to reproduce the problem (including images or placeholders). http://stackoverflow.com/help/how-to-ask — Michael Benjamin, Mar 12 '18 at 22:19
Really? I am working in chrome 65.0.3325.146but the circle is not centered for me! — Roel Voordendag, Mar 12 '18 at 23:27
can't reproduce the issue, you forgot to show the "breakpoint" mixin — Facundo Corradini, Mar 13 '18 at 01:33
Try using `margin : auto ` for the rounded div (in your case `.profile-picture`) — Samudra Deka, Mar 13 '18 at 07:28
Something missing in my answer, or you just haven't found time to check it out? — Asons, Mar 13 '18 at 17:38

Asons · Accepted Answer · 2018-03-13T07:01:48.680

justify-self doesn't apply on flex items.

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

In this case, with row direction and as you want to target only one of the flex container's items, use auto margin's and replace justify-self: center with margin-left: auto; margin-right: auto;

If the element to center doesn't have any default top/bottom margins, one can also use the shorthand margin: 0 auto.

In addition, here are a few more posts, covering how to align flex items:

Circle Div not centering with flexbox

1 Answers1