Trang chủLập trình WebHTML & CSSCách căn phần tử ra giữa trung tâm trong HTML CSS

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à positiontransform để 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

0 0 Phiếu bình chọn
Xếp hạng bài viết
BÀI VIẾT LIÊN QUAN
Đăng ký nhận thông báo
Thông báo email khi
guest
0 Bình luận
Không thể gửi email
Phản hồi nội tuyến

NÊN ĐỌC THÊM

Bạn muốn tìm kiếm gì?


0
Giáo sư! có thể ném gạch bên dưới nhé!x
()
x