Bài này mình sẽ hướng dẫn bạn cách căn giữa phần tử theo chiều ngang, chiều dọc, và theo cả 2 luôn.

Căn giữa phần tử theo chiều ngang

Cách 1: Xài thuộc tính text-align.

Bạn chỉ cần đặt thuộc tính text-align và gán giá trị là center là được.

.class{
    text-align: center;
}

Cách 2: Xài thuộc tính justify-content.

Đầu tiên bạn đặt thuộc tính justify-content và gán giá trị là center. Sau đó đặt tiếp thuộc tính display và gán giá trị là flex.

Cần phải có display flex thì justify mới có tác dụng.

.class{
    justify-content: center;
    display: flex;
}

Căn giữa phần tử theo chiều dọc

Xài thuộc tính align-items.

Bạn thuộc tính là align-items và gán giá trị là center. Sau đó đặt tiếp thuộc tính display và gán giá trị là flex, để nó hiểu align-items.

.class{
    align-items: center;
    display: flex;
}

Tức là cho nó nằm ngay giữa màn hình. Rất đơn giản, đó là kết họp cả 2 thuộc tính justify-content và align-items.

Giải thích: justify-content là để căn giữa ngang, align-items là để căn giữa dọc, còn display flex là để nó hiểu 2 thằng kia.

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

Tôi là nhà sáng lập Kênh Tin Học - Một người luôn có niềm đam mê với mọi thứ liên quan đến công nghệ và đổi mới.