Bài 24: Bố cục CSS – Căn chỉnh chiều ngang và chiều dọc

Căn giữa cho phần tử

Để căn giữa một phần tử khối theo chiều ngang (như div), sử dụng margin: auto;

Thiết lập chiều rộng của phần tử sẽ ngăn phần tử đó kéo dài ra các cạnh của vùng chứa.

Sau đó, phần tử chiếm chiều rộng được chỉ định và không gian còn lại sẽ được chia đều giữa hai lề.

Ví dụ:

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

Căn giữa cho văn bản

Để căn giữa văn bản bên trong một phần tử, sử dụng text-align: center;

Ví dụ:

.center {
  text-align: center;
  border: 3px solid green;
}

Căn giữa một hình ảnh

Để căn giữa một hình ảnh, thiết lập lề trái và lề phải thành auto và biết nó thành phần tử khối block:

Ví dụ:

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Căn chỉnh trái và phải – Sử dụng position

Một phương pháp để căn chỉnh phần tử là sử dụng position: absolute;.

Ví dụ:

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Căn chỉnh trái và phải – Sử dụng float

Phương pháp khác cho căn chỉnh phần tử là sử dụng thuộc tính float.
Ví dụ:

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

The clearfix Hack

Sau đó bạn có thể thêm clearfix hack để phần tử chứa để khắc phục sự cố này:
Ví dụ:

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Căn giữa theo chiều dọc – Sử dụng padding

Có nhiều cách để căn giữa một phần tử theo chiều dọc trong CSS. Một phương pháp đơn giản là sử dụng top và bottom padding:

Ví dụ:

.center {
  padding: 70px 0;
  border: 3px solid green;
}

Để căn giữa cả chiều ngang và chiều dọc, sử dụng padding và text-align: center:

Ví dụ:

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

Căn giữa theo chiều dọc – Sử dụng line – height

Một thủ thuật khác là sử dụng thuộc tính line-height với giá trị bằng thuộc tính height:

Ví dụ:

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}


.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

Căn giữa theo chiều dọc – Sử dụng position & transform

Nếu padding và line-height là không có tùy chọn, giải pháp khác là sử dụng position và thuộc tính transform:

Ví dụ:

.center {
  height: 200px;
  position: relative;
  border: 3px solid green;
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Căn giữa theo chiều dọc – Sử dụng Flexbox

Bạn có thể sử dụng flexbox để căng giữa mọi thứ. Chú ý rằng flexbox không hỗ trợ IE10 và phiên bản trước đó:

Ví dụ:

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}