Căn chỉnh các phần tử khối trong CSS

Thuộc tính margin không chỉ được dùng để tạo khoảng cách mà còn để căn giữa các phần tử khối. Để làm điều này, hãy đặt khoảng cách trái và phải thành giá trị auto.

Trong ví dụ dưới đây, khối bên trong sẽ được đặt ở giữa:

<div class="parent">
	<div class="child"></div>
</div>

.parent {
	border: 1px solid red;
}

.child {
	height: 100px;
	width: 200px;
	border: 1px solid green;
	margin: 10px auto;
}

Hãy lưu ý rằng cách này chỉ có thể căn giữa các phần tử khối, chỉ theo chiều ngang và chỉ khi chúng có chiều rộng được xác định.

Nếu chúng ta cần các khoảng cách trên và dưới khác nhau cho margin, thì có thể viết như sau:

.child {
	margin: 30px auto 10px auto;
}

Cũng có thể viết lại bằng ba giá trị: giá trị đầu tiên đặt khoảng cách trên, giá trị thứ ba - khoảng cách dưới, còn giá trị thứ hai đặt giá trị auto cho khoảng cách phải và trái:

.child {
	margin: 30px auto 10px;
}

Hãy tạo lại trang theo mẫu, sao cho các khối màu xanh lá cây được đặt ở giữa phần tử cha của chúng: