Move element up in 50% of its size

Question

How could I do a vertical overlay of Flexbox? I want to make half the circle inside the above item.

html, body {
  height: 100%;
}

body {
  background: #8844ee;
}

.card {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.background-header { 
  width: 400px;
  height: 400px;
  background: white;
  display: flex;
  flex-direction: column;
  
}

.topo {
  background-color: #1b2b34;
  background-size: cover;
  width: auto;
  height: 200px;
}

.foto {
  background-color: red;
  width: 75px;
  height: 75px;
  border: 3px solid white;
  border-radius: 50px;
  align-self: center;
}

.textos > h1,
.textos > h3{
  display:inline;
}

.textos {
  text-align: center;
}

<div class="card">
  <div class="background-header">
    <header class="topo"></header>
    <section class="foto">
    </section>
    <section class="textos">
      <h1>Nome</h1>
      <h3>23</h3>
      <p>Cidade</p>
    </section>
  </div>
</div>

Answer 1

You can use the CSS property transform for move the element up by 50% of its size. For this, use the transformer translateY, that move the element on axis Y.

So:

transform: translateY(-50%);

So that:

• translateY informs that we want to modify the position of the element in the Y axis;
• -50% indicates that we want to move the element upward 50% of its size.

In your case:

.foto {
  transform: translateY(-50%);
}

html, body {
  height: 100%;
}

body {
  background: #8844ee;
}

.card {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.background-header { 
  width: 400px;
  height: 400px;
  background: white;
  display: flex;
  flex-direction: column;
  
}

.topo {
  background-color: #1b2b34;
  background-size: cover;
  width: auto;
  height: 200px;
}

.foto {
  background-color: red;
  width: 75px;
  height: 75px;
  border: 3px solid white;
  border-radius: 50px;
  align-self: center;
}

.textos > h1,
.textos > h3{
  display:inline;
}

.textos {
  text-align: center;
}

<div class="card">
  <div class="background-header">
    <header class="topo"></header>
    <section class="foto">
    </section>
    <section class="textos">
      <h1>Nome</h1>
      <h3>23</h3>
      <p>Cidade</p>
    </section>
  </div>
</div>

^{I put it on top of the style sheet to make it easier to find.}

Answer 2

Applying the property margin-top inserting -10% of the value that is positioned!

html, body {
  height: 100%;
}

body {
  background: #8844ee;
}

.card {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.background-header { 
  width: 400px;
  height: 400px;
  background: white;
  display: flex;
  flex-direction: column;
  
}

.topo {
  background-color: #1b2b34;
  background-size: cover;
  width: auto;
  height: 200px;
}

.foto {
  background-color: red;
  width: 75px;
  height: 75px;
  border: 3px solid white;
  border-radius: 50px;
  align-self: center;
  margin-top: -10%;
}

.textos > h1,
.textos > h3{
  display:inline;
}

.textos {
  text-align: center;
}

<div class="card">
  <div class="background-header">
    <header class="topo"></header>
    <section class="foto">
    </section>
    <section class="textos">
      <h1>Nome</h1>
      <h3>23</h3>
      <p>Cidade</p>
    </section>
  </div>
</div>

I hope you helped him!