How to place a block in the center of the screen in CSS

👋 Today we will talk about how to place an element in the center of the screen using CSS. If you have just started your journey in programming, don't worry: everything will be explained very simply and clearly!

When you create a web page, sometimes you need to place an element, such as a text block or an image, right in the center of the screen. This makes the design more pleasant and user-friendly. Let's figure out how to do it! 🌉

Why place the block in the center?

Centering a block is a very common technique in web design. Centering elements makes the page more balanced and draws attention to important information. For example, a site may have a login form, and you want it to immediately catch the eye. In this case, it is convenient to place it right in the center.

Centering blocks also helps to make the page user-friendly, as key elements are not hidden somewhere in the corners.

💡 Main ways to center the block

There are several ways to place a block in the center of the screen using CSS. We will look at the most popular of them, which will suit even those who have just started learning web development.

1. Centering with Flexbox

Flexbox is one of the most convenient ways to place items in the center, and it is suitable even for beginners. Let's see how to do it:

<div class="wrapper">
  <div class="box">Я по центру! 👌</div>
</div>

And this is what the CSS for this task will look like:

.wrapper {
  display: flex;
  justify-content: center; /* Центрирование по горизонтали */
  align-items: center;   /* Центрирование по вертикали */
  height: 100vh;         /* Высота экрана */
}

.box {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 10px;
}

What's going on here? 🤔

• display: flex; makes the element a Flexbox container.

• justify-content: center; places the block horizontally.

• align-items: center; places the block vertically.

• height: 100vh; indicates that the height of the container is equal to the height of the entire screen.

Thus, the block is exactly in the center!

2. Use of positioning

Another simple way is to use absolute positioning and indentation properties. Here is an example:

<div class="box">Центр! 🚀</div>

And CSS:

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #add8e6;
  padding: 20px;
  border-radius: 10px;
}

• position: absolute; tells the browser that the block needs to be positioned relative to the nearest container with relative positioning.

• top: 50%; left: 50%; move the block to the center.

• transform: translate(-50%, -50%); corrects the position of the block so that the center of the element coincides with the center of the screen.

This method is good because it is easy to understand and apply, especially for simple tasks.

How to work with these methods?

To work effectively with centering, you need to understand a little about basic CSS properties, such as Flexbox, positioning, and indents. With experience, you will learn to choose the most suitable method depending on the task.

Flexbox is convenient for modern design, as it automatically adjusts elements, and positioning with transform allows you to accurately position the element in any part of the screen.

Practical example 🚀

Let's look at another example that you can try yourself:

<div class="center-wrapper">
  <h1>Добро пожаловать на мой сайт!</h1>
  <p>Этот текст находится точно по центру экрана. Попробуйте сами! 💪</p>
</div>

.center-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #ffebcd;
  text-align: center;
}

Here we added flex-direction: column; for placing text vertically, as well as text-align: center; to align the text.

🛍️ Conclusion

Now you know how to place a block in the center of the screen in several ways! This is the basis of web development, and these skills will definitely come in handy. Try to apply them in practice — this way you will quickly learn the material and understand which method is best suited for different tasks.

If you are interested in immersing yourself in the topic of web development and learning new techniques, write to us! We can create a mini-course that will make your learning simple and fun. 🎓