Question

How can you center an element vertically using CSS?

I'm trying to center an element vertically within its parent container using CSS but am unsure of the best approach. I've seen methods like flexbox, grid, or absolute positioning, but I'm not clear on how to implement them or which works best. Can someone guide me?

Answer 1

Using Flexbox

.container {
  display: flex;
  justify-content: center; 
  align-items: center;
  height: 100vh;       
}
.item {
  width: 40%;
  height: 20%;
  background-color: lightblue;
}

Using Grid

.container {
  display: grid;
  place-items: center;
  height: 100vh;
}
.item {
  width: 40%;
  height: 20%;
  background-color: lightblue;
}

Using Absolute Positioning

.container {
  position: relative;
  height: 100vh;
}
.item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 20%;
  background-color: lightblue;
}

Using Line-Height

.container {
  height: 100vh;
  text-align: center;
}
.item {
  display: inline-block;
  line-height: 100vh;
  vertical-align: middle;
  background-color: lightblue;
}