Div movement with elements

1

https://codepen.io/CaptainMakaveli/pen/YzyEYpP

Why I can t move this div with elements in it and how do I move everything to the center of the page?

2

Hi @CaptainMakaveli,

You’re using

display: absolute;

Absolute is a position attribute, not a display one.

Replace your div code with this:

div {
  padding: 170px;
  box-sizing: border-box;
  background-color: lightblue;
  border: 2px solid black;
  width: 700px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

This way you’ll be using flex-box.

display: flex; Just sets the element to be a flex-box.

By default, a flex-box positions the elements inside it as a row, so we use here flex-direction: column; to make them appear vertically.

align-items: center; and justify-content: center; Is used to make the elements completely center inside the flex-box.

You’ll need to give your body a width and height too if you want to center the div itself in the screen.

body {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

At the same time, transform it into a flex container to center it just as you did with the div.

Hope this helps!

1 Like
3