CSS canh một phần tử div nằm giữa một phần tử div khác

Làm sao để style một phần tử <div> với độ rộng nhất định nằm ở chính giữa một phần tử <div> bao ngoài nó. Ví dụ như đoạn mã HTML ở dưới đây phần tử:

<div id="outer" style="border: 1px solid red;">
  <div id="inner" style="border: 1px solid #333; width: 100px">Inner</div>
</div>

Thì phần tử div#inner sẽ nằm giữa phần tử div#outer?

2 Câu Trả Lời

Nam Nguyễn Nam Nguyễn

Trước tiên bạn cần hiển thị phần tử #outer theo kiểu block:

#outer {
    display: block;
    /* border */
    border: 1px solid red;
}

Sau đó sử dụng thuộc tính margin cho phần tử #inner với giá trị auto:

#inner {
    margin: 0 auto;
    /* border & width */
    border: 1px solid #333
    width: 100px;
}
Phan Quang Phan Quang

Bạn có thể canh theo cả chiều dọc và chiều ngang bằng flexbox

#outer { 
    display: flex;
    align-items: center;
    justify-content: center;
}
Nội dung tối thiểu 100 ký tự

Câu Hỏi Liên Quan