Hướng dẫn căn giữa trong css (p2)

Như bài trước Hướng dẫn căn giữa trong css(p1) mình đã hướng dẫn các bạn căn giữa theo chiều ngang(Horizontally), theo chiều dọc(Vertical) các selector trong css Bài này chúng ta tiếp tục căn giữa trong css theo cả chiều ngang và chiều dọc.

• Bạn có thể kết hợp các cách mà bài trước tôi đã hướng dẫn để căn giữa theo cả hai chiều. Nhưng tớ thấy căn giữa theo 2 chiều thường rơi vào 3 trường hợp dưới đây:

1. Nó có awidth và height cố định

• Sử dụng margin sao cho nó bằng một nửa awidth và height . Sau đó bạn đặt vị trí cho nó là position: absolute; top: 50%; left: 50%;

      position: absolute;
      top: 50%;
      left: 50%;
      background: black;
      color: white;
      awidth: 200px;
      height: 200px;
      margin: -120px 0 0 -120px;
      padding: 20px;

Xét ví dụ sau qua link https://jsfiddle.net/1qxh934q/16/ và kết quả ta thu được như hình ảnh dưới đây:

Ở đây các bạn thắc mắc tại sao margin-left và margin-top lại là -120px. Vì ta xét cả padding: 20px cho nó. Nếu bỏ padding thì margin left và top là 100px = 1/2 của awidth và height.

2. Nó không có awidth và height

• Nếu bạn không biết awidth và height bạn có thể sử dụng transform với translate -50% theo cả 2 chiều( nó có thể dựa theo giá trị hiện tại của awidth và height )

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

Xét ví dụ qua link sau : https://jsfiddle.net/1qxh934q/17/ và kết quả ta thu được như hình ảnh sau:

3. Bạn có thể sử dụng flexbox

• Để ở giữa theo 2 hướng bạn sử dụng flexbox và có sử dụng 2 thuộc tính trung tâm

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

Xét ví dụ qua link sau : https://jsfiddle.net/1qxh934q/18/ và kết quả ta thu được như hình ảnh dưới đây:

• Bài viết này và bài trước mình đã hướng dẫn các bạn căn giữa trong css theo chiều dọc, ngang, và cả 2 chiều. Cũng có rất nhiều cách làm ko nhất thiết vào những cách ở trên tùy vào trường hợp và dự án mà bạn sử dụng sao cho hợp lý. Nếu các bạn có những cách căn giữa trong css hay có thể để lại bình luận ở phần dưới comment. Cảm ơn đã theo dõi bài viết của mình. Reference : https://css-tricks.com/centering-css-complete-guide/