BFE.dev solution for CSS coding question
1. center an element vertically

This is a very basic CSS question.

1. Grid Layout

With Grid Layout, we can easily center the inner element with place-content.

.outer {  width: 100%;  height: 100%;  background-color: #efefef;  display: grid;  place-content: center;}

2. Flexbox Layout

We can also achieve the same result with Flexbox layout.

.outer {  width: 100%;  height: 100%;  background-color: #efefef;  display: flex;  justify-content: center;  align-items: center;}

3. Absolute positioning

We can place inner element to the center of container with position: absolute, but it is its top-left corner that will be centered, to fix it we can use transform to adjust its position.

.outer {  width: 100%;  height: 100%;  background-color: #efefef;  position: relative;}.inner {  width: 100px;  height: 100px;  background-color: #f44336;  position: absolute;  left: 50%;  top: 50%;  transform: translateX(-50%) translateY(-50%);}

Since the size of inner element is known, we can use negative margins as well.

.outer {  width: 100%;  height: 100%;  background-color: #efefef;  position: relative;}.inner {  width: 100px;  height: 100px;  background-color: #f44336;  position: absolute;  left: 50%;  top: 50%;  margin-top: -50px;  margin-left: -50px;}