How do I center these elements?

HTML-CSS
#1

I’ve finished Basic HTML & CSS section and there was this penguin at the end. Since there was no explanation on how to create one and I wanted to understand better how things work, I made this thing to play around with positioning:

<style>
  :root {
    --leaf-color: #C0C0C0;
    --hover-color: #ffbbbb;
  }

.container {
  position: relative;
  margin: auto;
  display: block;
  width: 500px;
  height: 500px;
}
.top-left {
  top: 50%;
  left: 19%;
  background-color: var(--leaf-color);
  transition: background-color .5s;
  width: 30%;
  height: 30%;
  border-radius: 120% 10% 10% 10%;
}
.top-left:hover {
  background-color: var(--hover-color);
}
.top-right {
  top: 50%;
  left: 50%;
  background-color: var(--leaf-color);
  transition: background-color .5s;
  width: 30%;
  height: 30%;
  border-radius: 10% 120% 10% 10%;
}
.top-right:hover {
  background-color: var(--hover-color);
}
.bottom-left {
  top: 81%;
  left: 19%;
  background-color: var(--leaf-color);
  transition: background-color .5s;
  width: 30%;
  height: 30%;
  border-radius: 10% 10% 10% 120%;
}
.bottom-left:hover {
  background-color: var(--hover-color);
}
.bottom-right {
  top: 81%;
  left: 50%;
  background-color: var(--leaf-color);
  transition: background-color .5s;
  width: 30%;
  height: 30%;
  border-radius: 10% 10% 120% 10%;
}
.bottom-right:hover {
  background-color: var(--hover-color);
}
.container * {
  position: absolute;
}
</style>
<div class="container">
  <div class="top-left"></div>
  <div class="top-right"></div>
  <div class="bottom-left"></div>
  <div class="bottom-right"></div>
</div>

What I don’t understand is how can I center the whole thing (vertically and horizontally)? I can move around single elements and play around with numbers to make it look like it’s centered, but once I open it on a bigger monitor it all seems to be off.
Thanks in advance.

#2

First of all, welcome to the community!

The issue you raised is one of the reasons that there are other tools for positioning besides the css position property.
Look into flexbox. I would first position the elements in the shape you want, making sure they fill the width of the container. Then, I would use flexbox on the container to position it vertically and horizontally within the body.
Alternatively, you could make the body display: grid. Have a 2 by 2 grid spanning the body’s width and height, with each leaf at the innermost point of the grid.
Let me know if you want an example via codepen.

#3

It’s not good practice to use position property to center elements in a container. From the sample code you have provided, you have “positioned” everything in the container “absolutely”. Meaning they will be taken out of the normal document flow. Doing that, to vertically and horizontally center elements can mess things up pretty quickly.

  • To center things horizontally, if you have assigned width property to the element, less than width of its container, use margin: 0 auto to center it.

  • You can also use text-align : center property to center elements in their container (I won’t guarantee it will always work, though it’s worth trying because it sometimes works for me)

  • Finally the surest way of centering multiple elements vertically or horizontally, as already mentioned by @b3u, is by using CSS grid or CSS flex box. Knowing the two is inevitable if you’re interested in front end development.

  • I rarely use position property for the sole purpose of centering elements horizontally or vertically. I advise you not to either.

I hope that helps.

1 Like
#4

Thanks a lot for your tips. I understand a lot more now about positioning after a couple of days.

#5