Tự học HTML - Định dạng phần tử trong html

Thông thường để định dạng vị trí tương đối của phần tử trong html chúng ta thường sử dụng

.item{display:block; width:50%; margin:10% auto;}

Trong đó: 

+ display:block để chuyển phần từ về dạng phần tử khối; 

+ width:50%; phần tử có chiều rộng bằng 50% phần tử cha;

+ margin: 10% auto; để định dạng khoảng cách trên, dưới là 10%; phần tử sẽ di chuyển vào giữa phần tử cha.

Tuy nhiên chúng ta còn nhiều cách để định dạng các phần tử, dưới đây là một số ví dụ:

Cách 1: Định dạng phần tử bằng định dạng vị trí tương đối: position: relative|absolute;

.container{position:relative;}
.item { position:absolute; top:50%;left:50%; tranform:translate(-50% 50%);	}

Phần tử con item sẽ có vị trí ở chính giữa phần tử cha .container.

Cách 2: Định dạng phần tử cha .container bằng display:flex

.container{display:flex;
	flex-directtion: row; /* value default; row-reverse|column|column-reverse */
}

Cách 3: Định dạng phần tử con ở vị trí giữa của phần tử cha

.container{display:flex;
	align-item:center;
	justify-content:center;
}

Cách 4: Định dạng nhiều phần tử

.container{
	gap:10px;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}
.item{
	width:20rem;
	height:10rem;
	background-color:#FF00FF;
}

Chúc các bạn làm tốt!