Center a div to the center of the screen in flexbox

Question

Center a div to the center of the screen in flexbox

Asked 5 years, 6 months ago

Viewed 985 times

1

I’m trying to make a copy of the website https://champion.gg/ using grid/flexbox and would like the Champion search box name centered with the page, same as the original site.

I applied a justify-content: space-between to distribute the divs but they are relative to each other, which can be done?

Original site:

And in mine it’s like this these days:

Replica of the code:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
    text-decoration: none;
    font-family: sans-serif;
}
body {
    background-color: #121617;
    
}
.grid-container {
    display: grid;
    grid-template-areas: 
        'header'
        'midct'
        'footer';
    grid-template-rows: auto auto 80vh 10vh;
    background: #1b2022;
    margin: 0rem 10rem;
    box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(15, 17, 20, 0.8), -12px 0 15px -4px rgba(15, 17, 20, 0.8);
}
/*Começo header*/
.header {
    background-color: #1e2325;
    display: flex;
    flex-direction: column;
}
.parteCima {
    padding-left: 1rem;
    background: 1d2224;
    display: flex;
    justify-content: space-between;
}
.parteBaixo {
    display: flex;
    padding-left: 1rem;
    background-color: #191e1f;
    align-items: center;
    align-content: center;
    justify-content: space-between;
}
.parteBaixo > div {
    
}
/* Search bar */
.search-form {
    display: flex;
    border: none;
    padding: .5rem;
    border-radius: 50%;
    
}
.logo {
    align-self: center;
}
.search-form input[type="text"] {
    padding: .2rem;
    color: #b0b0b0;
    border: 1px solid rgba(145, 145, 145, 0.1);
    background: #1e2325;
}
.search-form button[type="submit"] {
    padding: .5rem;
    border: none;
    background: #89f5a2;
    border-top-right-radius: 10%;
    border-bottom-right-radius: 10%;
    border: 1px solid rgba(145, 145, 145, 0.1);

}
.header ul {
    display: flex;
    padding: 1rem 1rem 1rem 0rem;
}
.header li a {
    margin-right: 1rem;
    color: #89f5a2;
    font-weight: 600;
}
.logo img{
    height: 60px;
}
.someNotes {
    color: white;    
}
.someNotes li {
    padding-right: .5rem;
}
.someNotes select {
    background: black;
    color: white;
    border: 1px solid #89f5a2;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <title>baladisGG</title>
</head>
<body>
    <div class="grid-container">
      <div class="header">
         <div class="parteCima">
             <ul>
              <li><a href="">Home</a></li>
              <li><a href="">Statistics</a></li>
              <li><a href="">F.A.Q.</a></li>
          </ul>
          <div class="socialMedia">
              <a href="#"><img src='https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Fchampion.gg%2F&ref_src=twsrc%5Etfw&text=Champion.gg%20-%20LoL%20Champion%20Stats%2C%20Guides%2C%20Builds%2C%20Runes%2C%20Masteries%2C%20Counters%20and%20Matchups!&tw_p=tweetbutton&url=https%3A%2F%2Fchampion.gg%2F&via=champion_gg'></a>
              
          </div>
         </div>
         <div class="parteBaixo">
             <div class="logo">
                 <img src="https://champion.gg/img/logo.png">
             </div>
                <div class="searchBox">
                  <form class="search-form">
                  <input type="text" placeholder="Champion name">
                  <button type="submit"><i class="fa fa-search"></i></button>
                  </form> 
                </div>
                <div class="someNotes">
                  <ul>
                      <li>Patch 9.10</li>
                      <li> Champions Analyzed 2,712,160</li>
                      <li>League</li>
                      <li>
                       <select class="select-css">
                        <option>Bronze</option>
                        <option>Prata</option>
                        <option>Ouro</option>
                        <option>Platina</option>
                       </select>    
                      </li>
                  </ul>    
                </div>
         </div> 
      </div>
          
    </div>
</body>
</html>

1 answer

Browser other questions tagged html css grid flexbox

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2019-06-01T15:47:46+00:00

Guy has some detailed there. But first keep in mind that the justify-content: space-between; will distribute those within the father, but will not distribute equally, for each child has a width, and the middle child will be adjusted in the remaining space between the first child and the last child. So the middle child is always centered on the father’s remaining space by discounting the width of the first and last child.

Your code is like the image below, children of different sizes, proves this "misalignment"... and equal sizes is as you expected.

But all is not lost. You can force all the children of one container flex have the same measure, for that you will use flex: 1; in the container children. And will align the form in the center of the middle child as below.

Follow the code with these settings.

OBS: I needed to reduce the source of the texts on the right... and obviously you need to treat the responsiveness of this in small screens...

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
    text-decoration: none;
    font-family: sans-serif;
}
body {
    background-color: #121617;
    
}
.grid-container {
    display: grid;
    grid-template-areas: 
        'header'
        'midct'
        'footer';
    grid-template-rows: auto auto 80vh 10vh;
    background: #1b2022;
    margin: 0rem 10rem;
    box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(15, 17, 20, 0.8), -12px 0 15px -4px rgba(15, 17, 20, 0.8);
}
/*Começo header*/
.header {
    background-color: #1e2325;
    display: flex;
    flex-direction: column;
}
.parteCima {
    padding-left: 1rem;
    background: 1d2224;
    display: flex;
    justify-content: space-between;
}
.parteBaixo {
    display: flex;
    padding-left: 1rem;
    background-color: #191e1f;
    align-items: center;
    align-content: center;
    justify-content: space-between;
}
.parteBaixo > div {
    
}
/* Search bar */
.search-form {
    display: flex;
    border: none;
    padding: .5rem;
    border-radius: 50%;
    
    margin: auto;
}
.logo {
    align-self: center;
}
.search-form input[type="text"] {
    padding: .2rem;
    color: #b0b0b0;
    border: 1px solid rgba(145, 145, 145, 0.1);
    background: #1e2325;
}
.search-form button[type="submit"] {
    padding: .5rem;
    border: none;
    background: #89f5a2;
    border-top-right-radius: 10%;
    border-bottom-right-radius: 10%;
    border: 1px solid rgba(145, 145, 145, 0.1);

}
.header ul {
    display: flex;
    padding: 1rem 1rem 1rem 0rem;
}
.header li a {
    margin-right: 1rem;
    color: #89f5a2;
    font-weight: 600;
}
.logo img{
    height: 60px;
}
.someNotes {
    color: white;    
}
.someNotes li {
    padding-right: .5rem;

    font-size: 12px;
    white-space: nowrap;
}
.someNotes select {
    background: black;
    color: white;
    border: 1px solid #89f5a2;
}


.parteBaixo > div {
  flex: 1;
}
.searchBox {
  display: flex;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="grid-container">
  <div class="header">
      <div class="parteCima">
          <ul>
          <li><a href="">Home</a></li>
          <li><a href="">Statistics</a></li>
          <li><a href="">F.A.Q.</a></li>
      </ul>
      <div class="socialMedia">
          <a href="#"><img src='https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Fchampion.gg%2F&ref_src=twsrc%5Etfw&text=Champion.gg%20-%20LoL%20Champion%20Stats%2C%20Guides%2C%20Builds%2C%20Runes%2C%20Masteries%2C%20Counters%20and%20Matchups!&tw_p=tweetbutton&url=https%3A%2F%2Fchampion.gg%2F&via=champion_gg'></a>
          
      </div>
      </div>
      <div class="parteBaixo">
          <div class="logo">
              <img src="https://champion.gg/img/logo.png">
          </div>
            <div class="searchBox">
              <form class="search-form">
              <input type="text" placeholder="Champion name">
              <button type="submit"><i class="fa fa-search"></i></button>
              </form> 
            </div>
            <div class="someNotes">
              <ul>
                  <li>Patch 9.10</li>
                  <li> Champions Analyzed 2,712,160</li>
                  <li>League</li>
                  <li>
                    <select class="select-css">
                    <option>Bronze</option>
                    <option>Prata</option>
                    <option>Ouro</option>
                    <option>Platina</option>
                    </select>    
                  </li>
              </ul>    
            </div>
      </div> 
  </div>
      
</div>