Cách căn phần tử ra giữa trung tâm trong HTML CSS

Trong bài viết này mình sẽ hướng dẫn các bạn có thể căn phần tử ra đúng giữa trung tâm của một thành phần cha, ví dụ như để căn form đăng ký ra trung tâm màn hình.

Cách căn phần tử ra giữa trung tâm với CSS

Để căn phần tử nằm ra đúng giữa trung tâm so với thuộc tính cha của nó với CSS tương đối đơn giản. Ban đầu mình sẽ có 2 khối(thẻ div) như bên dưới, khối màu xanh là phần tử cha(box1), phần tử con là khối màu đỏ(box2).

HTM và CSS ban đầu sẽ như sau:

HTML

<div class="box1">
  <div class="box2">
  </div>
</div>

CSS

.box1{
    background: #f00;
    width: 500px;
    height: 500px;
    background: #0f0;
}
.box2{
    background: #f00;
    width: 250px;
    height: 250px;
}

Để đẩy phần tử box2 ra giữa so với phần tử cha là box1 chúng ta sẽ sử dụng tới thuộc tính là margin:0 auto cho phần tử con, cụ thể ta sẽ thêm style cho thẻ box2 như sau:

.box2{
    background: #f00;
    width: 250px;
    height: 250px;
    margin:0 auto ;
}

Và đây là kết quả

Tuy nhiên để đẩy phần tử con box2 ra đúng giữa trung tâm của thẻ box1 thì chúng ta lại không làm như thế, thay vì sử dụng thuộc tính margin thì ta sẽ cần tới 2 thuộc tính là position và transform để làm việc đó.

Cụ thể lúc này CSS chúng ta sẽ sửa lại như sau:

.box1{
    background: #f00;
    width: 500px;
    height: 500px;
    background: #0f0;
}
.box2{
    background: #f00;
    width: 250px;
    height: 250px;

position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

Và dưới đây là kết quả

Chúng ta có thể áp dụng cách này để đẩy form đăng nhập ra trung tâm màn hình, với box2 lúc này sẽ là form đăng nhập và coi thẻ body là box1.

Xem thêm video dưới đây