AI solution for Interview Question on BFE.dev
121. How to center an element vertically?

1. Using Flexbox:

Flexbox is the most popular and easiest way to center an element both vertically and horizontally. Here is an example:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

By setting the display property of the container to flex, we can use the justify-content and align-items properties to center the child element both horizontally and vertically.

2. Using Position:

You can use position property to center an element vertically. Here is an example:

.container {
  position: relative;
}

.centered-element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

In this example, the container has a relative position, and the child element has an absolute position. By setting the top property of the child element to 50%, the element comes to the center of the container.

3. Using Line-height:

You can also use line-height property to center a single line of text. Here is an example:

.container {
  height: 300px; /* Set height of container */
  line-height: 300px; /* Center text vertically */
}

In this example, the container has a fixed height, and by setting the line-height property of the container equal to its height, a single line of text will be vertically centered.

4. Using Negative Margin:

You can also use negative margin to center an element vertically. Here is an example:

.container {
  height: 300px; /* Set height of container */
}

.centered-element {
  height: 50px; /* Set height of child element */
  margin-top: -25px; /* Set negative margin */
}

In this example, the child element has a fixed height, and by setting a negative top margin of half its height, it will be vertically centered within the parent container.