Question 45113 in Html Question posted in
Some basic documentation can be found here.

Why isn't flex box centering my div properly – Html

I was watching a video that used align items and justify center to put a div on top of the page

why is it only at the top not at in the middle of the page?

Div using flexbox.

.wrapper {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 0 10%;
  overflow: hidden;
  height: 100%;
}
<div class="wrapper">
  <div class="cols cols0">
    <span class="topline">Hello</span>
    <h1> I'm <span class="multiText">Coder</span></h1>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus, sed nam quia autem voluptatum quae omnis maiores dolorem hic dolores sint quisquam a. Eaque expedita laborum debitis, dolores fugit assumenda!</p>
    <div class="btns"> <button> download CV</button>
      <button> hire me</button>
    </div>
  </div>
  <div class="cols cols0"></div>
</div>
Tags:

2

Answers


  1. 0

    The .wrapper div is not spread over the full height.
    You can set its height to 100vh

    Login or Signup to reply.
  2. 0

    The issue is that height: 100% means 100% of the parent’s height. The parent’s height however is by default set to fit-content means the height is undefined. 100% of undefined is also undefined!

    In order to vertically center content within an element, the height of the element must be higher than the content itself!

    The simple solution is to give it a min-height of 100vh (the height of your content frame within the browser.

    To remove the default vertical scrollbar you have to reset the default body margin and set the box-sizing of the element to border-box as otherwise, the padding will add height on top.

    /* need to add this body reset + min-height */
body {
  margin: 0;
}

.wrapper {
  min-height: 100vh;
  box-sizing: border-box;
}


/* original css */
.wrapper {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 0 10%;
  overflow: hidden;
  height: 100%;
}
    <div class="wrapper">
  <div class="cols cols0">
    <span class="topline">Hello</span>
    <h1> I'm <span class="multiText">Coder</span></h1>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus, sed nam quia autem voluptatum quae omnis maiores dolorem hic dolores sint quisquam a. Eaque expedita laborum debitis, dolores fugit assumenda!</p>
    <div class="btns"> <button> download CV</button>
      <button> hire me</button>
    </div>
  </div>
  <div class="cols cols0"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search