Căn giữa một DIV theo chiều ngang và dọc bằng css như thế nào ?

Sử dụng thuộc tính position + transform

.parent {

background-color: #3a3845;

width: 100vw;

height: 100vh;

  /* additional style */

  position: relative;

}

.child {

background-color: #f7ccac;

width: 200px;

height: 200px;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

Mã này đặt vị trí của phần tử div thành tuyệt đối, cho phép chúng ta định vị phần tử đó so với vùng chứa chính của nó. Sau đó, chúng tôi đặt các thuộc tính trên cùng và bên trái thành 50%, đặt góc trên cùng bên trái của phần tử div ở giữa vùng chứa chính của nó.

Cuối cùng, chúng tôi sử dụng thuộc tính biến đổi với chức năng dịch để di chuyển phần tử div sao lưu và sang trái 50% chiều rộng và chiều cao của chính nó, căn giữa nó một cách hiệu quả theo cả chiều ngang và chiều dọc.

Điều quan trọng cần lưu ý là phương pháp này chỉ hoạt động nếu vùng chứa chính có chiều cao và chiều rộng xác định. Nếu vùng chứa chính là phần tử body, chúng ta cần đặt chiều cao của cả phần tử body và html thành 100% để phương thức này hoạt động bình thường.

Sử dụng Flexbox

.parent {

background-color: #3a3845;

width: 100vw;

height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

}

.child {

background-color: #f7ccac;

width: 200px;

height: 200px;

}

display: flex biến thẻ cha thành Flex container, justify-content: center căn giữa các thẻ con theo chiều ngang, align-items: center căn giữa các thẻ con theo chiều dọc.

Tuỳ vào từng tình huống mà ta dùng các cách một cách linh hoạt nhất. Khi không thể sử dụng cách 1 thì ta dùng cách 2 và ngược lại.