CSS các thủ thuật căn giữa

- Việc căn chỉnh một phần tử (element) so mới một phần tử (cha) khác sẽ dựa vào các thuộc tính position, display của phần tử đó như thế nào.

- Giá trị của thuộc tính position gồm có 4 giá trị:

  • static (tĩnh - giá trị mặc định)
  • relative (tương đối)
  • absolute (tuyệt đối)
  • fixed (cố định)

- Giá trị display của thuộc tính gồm khá nhiều, mình liệt kê một số hay dùng:

  • inline
  • inline-block
  • block
  • flex
  • table
  • table-cell
  • table-column

- Và việc căn giữa một phần tử sẽ được hiểu theo ba hướng:

  • (1) Theo chiều ngang (trục X)
  • (2) Theo chiều dọc (trục Y)
  • (3) Căn chính giữa cả chiều dọc lẫn chiều ngang ở ngay tâm phần tử khác.

    Đối với trường hợp thứ hai và thứ ba: chúng ta chỉ có thể xét phần tử có positionrelative, absolute, fixed hoặc phần tử cha có thuộc tính display liên quan đến table, bạn cứ tưởng tượng đến việc căn chỉnh chữ trong ô của table ấy.

- Chúng ta sẽ xét các trường hợp xem cách căn giữa của chúng như thế nào nhé:

1. Position: static

- Trưởng hợp này chúng ta chỉ xét hướng (1), có 2 cách để căn giữa:

- Đặt text-align: center; cho phẩn tử cha và phần tử con bắt buộc có display phải là inline hoặc inline-block;

 <!-- phần tử cha cũng bắt buộc display: block; thẻ div mặc định đã có display là block rồi!, thẻ span mặc định có display là inline. -->
<div style="text-align: center;">
    <span>Text center</span>
</div>

- Nếu phần tử con có displayblock thì set margin-left: auto; margin-right: auto; nó sẽ tự chỉnh căn giữa cho phần tử này với điều kiện phần tử này có giá trị width < 100%;

<div>
    <div style="width: 30%; margin: 0 auto;">Text center</div>
</div>

2. Position: relative, static, fixed

- Đối với positon: relative, tương tự như trường hợp 1

- Cả 3 giá trị position này để căn giữa chúng ta có thể dịch chuyển các giá trị top, right, bottom, left (thường thì nếu dùng top thì thôi không dùng bottom, và dùng left rồi thì thôi không dùng right nữa và ngược lại) của nó so với phần tử cha của nó.

position

- Cách xác định phần tử để nó căn vị trí:

  • relative: chính là vị trí thông thường của nó (không set gì cả)
  • absolute: phần tử có giá trị position phải đi cặp với phần tử khác có position ralative: nếu đi từ trong ra, phần tử cha nào có thuộc tính position relative thì đó chính là phần tử để nó so sánh vị trí của nó, nếu không có thì nó sẽ so sánh với cửa sổ trình duyệt. ví dụ cho dễ hiểu nhé:
<div class="parent-1" style="height: 500px;">
    <div class="parent-2" style="height: 300px; position: relative;"> <!-- các giá trị top, left, bottom, right sẽ so với phần tử này -->
        <div class="parent-3" style="height: 200px;"> <!-- chứ không phải thèng này -->
            <div class="child" style="position: absolute">Text center</div>
        </div>
    </div>
</div>
  • fixed: luôn luôn là cửa số trình duyệt

- Nhưng làm sao để căn giữa thật chính xác cho phần tử chúng ta muốn, nếu dùng top, left đơn vị là px thì rất khó, do đó chúng ta phải sử dụng đơn vị %, chính giữa nó thì chỉ có một giá trị là 50%. thử nhé:

<div class="parent-1" style="height: 500px;">
    <div class="parent-2" style="height: 300px; position: relative; border: 1px solid #ddd; background: #fff; width: 300px;">
        <div class="parent-3" style="height: 200px;">
            <div class="child" style="position: absolute; width: 100px; height: 100px; background: red;
                     top: 50%; left: 50%;"></div>
        </div>
    </div>
</div>
 

 

- Kết quả là việc căn chỉnh của nó vẫn chưa vào giữa, chỉ có cái góc (top, left) là ở giữa thôi, như vậy bây giờ chúng ta phải làm sao để nó vào giữa chính xác:

- Đến đây chúng ta phải sử dụng thuộc tính transform cho phần tử này nữa:

  • transform: xác định một dịch chuyển có thể là 2, 3 chiều cho phần tử, nó có thể xoay, di chuyển, thu phóng ...
  • translate: chúng ta sẽ dùng di chuyển phần tử theo chiều X (translateX), Y (translateY) - (có thể dùng tắt là translate(X, Y) một đoạn = 50% chiều dài, rộng của chính phần tử này theo chiều ngược lại với việc căn chỉnh, khi đó phần tử sẽ nằm chính giữa so với phần tử cha.
<div class="parent-1" style="height: 500px;">
    <div class="parent-2" style="height: 300px;
        width: 300px;
        position: relative;
        border: 1px solid #ddd;
        background: #fff;">
        <div class="parent-3" style="height: 200px;">
            <div class="child" style="position: absolute;
                width: 100px;
                height: 100px;
                background: red;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);"></div>
        </div>
    </div>
</div>
 

 

 - Và kết quả nó đã căn giữa.

3. Dùng display liên quan đến table

- Trường hợp này chúng ta dùng sử dụng một chút trường hợp một là căn giữa theo chiều ngang dùng text-align: center, sau đó set phần tử cha có display là table-cell (ô trong bảng) rồi set vertical-align cho nó là middle thì các phần tử trong ô sẽ được căn giữa theo chiều đứng (trục Y)

- Thuộc tính vertical-align: căn nội dung theo chiều dọc, nó có nhiều giá trị như: top, midle, bottom...

<div class="parent-1" style="height: 300px;
     width: 300px;
     height: 300px;
     border: 1px solid #ddd;
     display: table-cell;
     vertical-align: middle;
     text-align: center;">
    <div class="child" style="width: 100px;
         height: 100px;
         background: red;
         display: inline-block;"></div>
</div>
 

 

4. dùng CSS3 flexbox

- Flexbox là một bố cục mới của CSS3 mà nó sẽ tự dàn trải kích thước các thành phần bên trong để phù hợp với mọi thiết bị, nó có rất nhiều thuộc tính hay ho, các bạn tự search và tìm hiểu thêm nhé, trong bài này mình chỉ giới thiệu cách dùng flexbox để căn giữa phần tử

<div class="parent" style="height: 300px;
     width: 300px;
     height: 300px;
     border: 1px solid #ddd;
     display: flex;
     align-items: center;
     justify-content: center;">
    <div class="child" style="width: 100px;
         height: 100px;
         background: red;
         display: inline-block;"></div>
</div>
 

 

  • justify-content: center - căn giữa phần tử bên trong theo chiều ngang
  • align-items: center - căn giữa phần tử bên trong theo chiều dọc

- Flexbox ngày càng được dùng phổ biến bởi tính đơn giản, tiện dụng, không phải set nhiều thuộc tính, hiện nay bootstrap 4 cũng đang sử dụng flexbox để tạo bố cục layout thay vì dùng css thông thường

 

- Trên đây là một vài thủ thuật căn giữa bằng CSS mà mình từng biết, nếu có sai sót gì hoặc thiếu phương pháp nào nữa mong các bạn comment bổ sung nhé! thanks!

 

Bài viết từ pinlaz.com