Hướng dẫn căn giữa phần tử trong CSS một cách dễ dàng và hiệu quả

Khi thiết kế trang web, việc căn giữa phần tử là một trong những yếu tố quan trọng giúp trang web của bạn trở nên chuyên nghiệp và thu hút sự chú ý của người dùng. Trong bài viết này, chúng tôi sẽ hướng dẫn cho bạn cách căn giữa phần tử trong CSS một cách dễ dàng và hiệu quả.

Đây là những cách phổ biến nhất và cũng là cách mình hay sử dụng để căn giữ giữ một phần tử trong CSS. Mình sẽ giải thích cho các bạn và các bạn cũng cần phải hiểu rõ csc thuộc tính mà mình sẽ viết ngay dưới đây nhé.

Đầu tiên mình sẽ tạo khung và set các style cơ bản để có thể định hình cho các phần tử.

<div class="parent">
    <div class="child"></div>
</div>

.parent {
    background-color: blueviolet;
    width: 100%;
    height: 100vh;
}
 
.child {
    background-color: orange;
    width: 200px;
    height: 200px;
}

Với class parent tương ứng với thẻ cha, class child tương ướng với thẻ con và mình cũng set background hay kích thước để tiện cho việc quan sát.

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

Cách 1: Với các đầu tiên mình sẽ sử dụng text-align: center và display: inline-block;

.parent {
    text-align: center;
}
 
.child {
    display: inline-block;
}

Thuộc tính text-align: center; căn giữ nội trên trục ngang. Tuy nhiên, điều này chỉ áp dụng cho các phần tử có kiểu hiển thị là inline hoặc inline-block. Nhưng bên trên phần tử trên dùng thẻ div và mặc định của theo div là display: block Vì vậy phần tử bên trong không được căn giữ nên mình đã set cho nó thuộc tính là display: inline-block;

Cách 2: Cách này sẽ đơn giản hơn bạn chỉ cần dùng thuộc tính margin: 0 auto; là sẽ nhẫn được 1 kết quả tương tự nhé.

.child {
    margin: 0 auto;
}

Thuộc tính margin: 0 auto; với tham số đầu tiên là set margin trên, dưới nó sẽ tương tự như: margin-top: 0; và margin-bottom: 0; còn tham số thứ 2 là sẽ cho bên trái và phải của phần tử. Với giá trị là auto thì nó sẽ tương ứng cho cách lề 2 bên với 1 khoảng là như nhau.

Cách 3: Sử dụng display: flex; và justify-content: center;

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

Thuộc tính display: flex; giúp cho các phần tử bên trong nó sẽ dàn sang ngang. Thuộc tính justify-content: center; sẽ xác định cách sắp xếp các phần tử trên trục chính (theo chiều dọc hoặc ngang, mặc định là chiều ngang). Với giá trị là center thì các phần tử sẽ được căn giữa theo trụ ngang.

Cách 4: Sử dụng position: relative; và position: absolute;

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

Thuộc tính position: relative; thiết lập vị trí của pần tử theo vị trí ban đầu của nó, mình thêm vào đây để phần tử con sẽ ăn theo phần tử cha là chính nó. Thuộc tính position: absolute; định vị dựa trên phần tử cha của nó, nhưng các bạn phải thêm thuộc tính position với giá trị là 1 trong 3 giá trị sau relative, fixed, sticky. Với left: 50%; nó sẽ cách bên trái là 50% nhưng ở đây điểm chính giữ nó sẽ lấy cạnh trái là điểm chính giữa, ví thế bạn cần thêm thuộc tính transform: translateX(-50%); thộc tính này sẽ giúp phần tử lui về 50% của chính nó.

Với 4 cách mình đã hướng dẫn bên trên các bạn có thể áp dụng vào mọi dự án của các bạn nhé. Thế là chúng ta đã đi qua các cách că giữ theo chiều ngang, bây giờ cũng mình căn giữa các phần tư theo chiều dọc.

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

Cách 1: Sử dụng display: flex;

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

Thuộc tính display: flex; nghe rất quen đúng không trong thực tế thuộc tính này rất được nhiều người sử dụng, chức năng của nó mình đã nói ở bên trên. Thuộc tính align-items: center; xác định cách căn chỉnh các phần tử trên trục phụ (theo chiều dọc hoặc ngang, ở đây sẽ là chiều dọc). Với giá trị là center nó căn giữa trục dọc ngược lại so với justify-content: center.

Cách 2: Sử dụng position: relative; và position: absolute; thật ra ở cách này nó tương tự như căn giữa phần tử theo chiều ngang mà thôi. Chỉ khác sử dụng thộc tính top và transform.

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

Thuộc tính top: 50%; tương tự nhưng thuộc tính left, chỉ khác là ở đây là cách từ trên xuống dưới. transform: translateY(-50%) cũng tương tượng như transform: translateX(-50%) nhưng ở đây là căn theo trụ dọc nhé. (Tham khảo cách 4 căn phần tử theo chiều ngang).

Chúng ta đã đi qua căn giữa phần tử theo chiều ngang và dọc rồi. Cuối cũng là kết hợp cả hai vào để tạo ra căn phần tử ở chính giữa.

Căn phần tử chính giữa

Việc căn phần tử ở chính giữ này vẫn chủ yếu sử dụng các thộc tính trên nhưng là kết hợp giữ ác phần tử đó với nhau.

Cách 1: Sử dụng display: flex; kết hợp cách 3 của căn giữa phần tử theo chiều ngang và cách 1 của căn giữa phần tử theo chiều dọc.

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

Cách 2: Sử dụng position: relative; và position: absolute; kết hợp cách 4 của căn giữa phần tử theo chiều ngang và cách 2 của căn giữa phần tử theo chiều dọc.

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

Phần kết

Trong bài viết này, chúng ta đã tìm hiểu các cách căn giữa phần tử trong CSS, bao gồm căn giữa theo chiều ngang, chiều dọc và căn giữa tuyệt đối. Có nhiều cách để căn giữa phần tử trong CSS, từ sử dụng margin đến sử dụng các thuộc tính flexbox. Mỗi cách có ưu điểm và hạn chế riêng, tùy thuộc vào tình huống cụ thể mà bạn đang làm việc.

Ngoài ra, chúng ta cũng đã tìm hiểu về hai thuộc tính quan trọng trong CSS là display: flex; và position: absolute;, giúp kiểm soát bố cục và định vị các phần tử trên trang web một cách linh hoạt và dễ dàng. Việc căn giữa phần tử trong CSS là một kỹ năng quan trọng trong thiết kế web và giúp trang web của bạn trông chuyên nghiệp hơn. Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về cách căn giữa phần tử trong CSS và sử dụng chúng một cách hiệu quả trong thiết kế trang web của mình.

Chúc các bạn thành công !