CSS không còn quá xa lạ đối với lập trình web. Nhưng để căn giữa phần tử thì lại là một vấn đề nan giải không phải ai cũng làm được. [Bài viết](https://wolfactive.dev/can-giua-element-trong-css/ “Bài viết”) này sẽ giúp bạn giải quyết vấn đề đó .
1. Sử dụng Flex để căn giữa phần tử
Ví dụ mình có một carousel sau và mình muốn căn giữa Title và Description vào chính giữa của carousel
| 1234567891011 | <section class="carousel"> <h1 class="carousel__title">Đây là Title</h1> </section> |
Và mình sẽ style carousel để nó thành một carousel màu với width là 100% và height là 500px
| 1234567891011121314151617 | body {width: 100%;padding: 0px;margin: 0;} .carousel {width: 100%;padding: 0px;margin: 0;height: 500px;background-color:darkred;}.carousel__title {margin: 0;color: #fff;} |
Các bạn có thể thấy là thẻ h1 thường sẽ có margin mặc định nên mình sẽ cho margin của nó là 0. Và do section là một thẻ block nên mình có thể set height cho nó được, nếu như nó là thẻ inline thì việc set height là hoàn toàn không thể
Để căn chính giữa title mình sẽ css như sau
| 1234567891011121314151617181920 | body {width: 100%;padding: 0px;margin: 0;} .carousel {width: 100%;padding: 0px;margin: 0;height: 500px;background-color:darkred;display: flex;justify-content: center;align-items: center;}.carousel__title {margin: 0;color: #fff;} |
Ở đây mình set cho .carousel các thuộc tính display:flex;justify-content: center;align-items: center; để căn giữa title. Vậy tại sao lại kỳ diệu được như vậy?
Theo như các bạn đã biết thì thuộc tính display:flex dùng để dàn ngang phần tử. Nhưng khi bạn chỉ có một phần tử con bên trong .carousel thì việc dàn ngang phần tử vẫn xảy ra nhưng các bạn sẽ không thấy nó hiện thị tường minh trên trình duyệt. Thuộc tính justify-content: center để căn giữa theo chiều ngang của các phần tử con bên trong. Thuộc tính jalign-items: center để căn giữa theo chiều dọc của các phần tử con bên trong. Nếu như set 2 thuộc tính này vào .carousel thì chỉ có mình title được căn giữa và không bị các phần tử khác chen vào.
Vậy như phương pháp này được sử dụng khi nào ? Khi bên trong phần tử cha chỉ có một phần tử con.
2. Sử dụng Translate và Position để căn giữa phần tử
Ví dụ mình cũng có như trên phần trước. Và mình sẽ css cho title nằm giữa bằng Translate và Position
| 12345678910111213141516171819202122 | body {width: 100%;padding: 0px;margin: 0;} .carousel {width: 100%;padding: 0px;margin: 0;height: 500px;background-color:darkred;position: relative;}.carousel__title {position:absolute;margin: 0;color: #fff;top: 50%;left:50%;transform: translate(-50%,-50%);} |
Ở đây mình thêm position: relative cho .carousel và position:absolute;top:50%;left:50%; Một số trong các bạn sẽ nghĩ thêm các thuộc tính này thì chắc title sẽ được căn chính giữa. Nhưng sự thật không phải như vậy khi để position:absolute;top:50%;left:50%; thì title sẽ được canh ngay vị trí của .carousel nên khi dời top 50% và left 50% thì nó di chuyển tới phân nữa của .carousel
Do vậy mình thêm một thuộc tính transform: translate(-50%,-50%) để xử lí vấn đề đó lúc này title sẽ dịch chuyển ngược trở lại % kích thước của chính nó. Như vậy là chúng ta đã có thể canh giữa phần tử 2 thuộc tính trên một cách dễ dàng.
