Cách dùng CSS để đặt một element ở vị trí chính giữa

Khi sử dụng CSS trong phát triển giao diện website, có một số cách để đặt một element (child element) ở vị trí chính giữa của window hoặc chính giữa một element khác (parent element). Chúng ta hay cùng tìm hiểu một vài cách sau:

1. Trường hợp đã biết giá trị awidth và height của child element

.parent {
  position: relative;
}

.child {
  awidth: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

2. Trường hợp chưa biết giá trị awidth và height của child element

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3. Sử dụng flexblox

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

Tóm lại, bạn luôn có thể đặt một element ở chính giữa bằng CSS.

Source:

Centering in CSS: A Complete Guide - by Chris Coyier

https://css-tricks.com/centering-css-complete-guide/