Center the image
To center an image, place margin-left and margin-right to auto and make the image a form element block. block as mentioned in the note above.
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
For example:
img {
display: block;
margin-left: auto;
margin-right: auto;
}
Căn giữa hình ảnh
Để căn giữa một ảnh, đặt margin-left và margin-right thành auto và làm
cho hình ảnh trở thành phần tử dạng block như đã nói ở lưu ý phía trên.

Align text horizontally – Use text-align
In CSS there are properties text-align Allows the content text to be aligned to the left, center or right of the element using the following values:
- text-align: center – center alignment
- text-align: left – left alignment
- text-align: right – align right
For example:
.center {
text-align: center;
border: 3px solid purple;
}
.left {
text-align: left;
border: 3px solid purple;
}
.right {
text-align: right;
border: 3px solid purple;
Căn giữa
Website Quản trị mạng
Căn trái
Website Quản trị mạng
Căn phải
Website Quản trị mạng
Note: Attributes text-align also only applies to elements block. block because inline occupies only enough width for its content.
Learn more about text formatting in CSS here
Align left/right – Use position
Another method to align elements is to use position: absolute.
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid purple;
padding: 10px;
}
For example:
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid purple;
padding: 10px;
}
Căn phải sử dụng position
Quantrimang.com là mạng xã hội về khoa học công nghệ, mở rộng nội dung
để đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn như
điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính...
Bạn có thể trở thành một phần của Quantrimang.com bằng cách gửi bài viết,
trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung của mạng xã
hội thông qua địa chỉ email info@meta.vn hoặc đăng ký tài khoản và đăng bài
trực tiếp trên Quantrimang.com.
Align left/right – Use float
float property also used for element alignment.
.right {
float: right;
width: 300px;
border: 3px solid purple;
padding: 10px;
}
For example:
.right {
float: right;
width: 300px;
border: 3px solid purple;
padding: 10px;
}
Căn phải sử dụng float
Quantrimang.com là mạng xã hội về khoa học công nghệ, mở rộng nội dung
để đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn như
điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính...
Bạn có thể trở thành một phần của Quantrimang.com bằng cách gửi bài viết,
trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung của mạng xã
hội thông qua địa chỉ email info@meta.vn hoặc đăng ký tài khoản và đăng bài
trực tiếp trên Quantrimang.com.
Attention: If an element is being floated higher than the parent element, it will cause content to overflow. To fix it, we use clearfix overflow: auto:
.clearfix {
overflow: auto;
}
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.clearfix {
overflow: auto;
}
.img2 {
float: right;
}
/* Viết bởi Quantrimang.com */
Trong ví dụ này, hình ảnh đang được float vào cao hơn thành phần chứa nó,
do đó bị tràn ra bên ngoài:

Nho là một loại quả mọng lấy từ các loài cây thân leo thuộc chi Nho (Vitis).
Quả nho mọc thành chùm từ 6 đến 300 quả, chúng có màu đen, lam, vàng, lục,
đỏ-tía hay trắng.
Sử dụng class clearfix với giá trị overflow: auto để
khắc phục:

Nho là một loại quả mọng lấy từ các loài cây thân leo thuộc chi Nho (Vitis).
Quả nho mọc thành chùm từ 6 đến 300 quả, chúng có màu đen, lam, vàng, lục,
đỏ-tía hay trắng.
Center vertically – Use padding
There are many ways to center an element vertically in CSS. The simplest solution is to use padding.
.center {
padding: 70px 0;
border: 3px solid green;
For example:
.center {
padding: 70px 0;
border: 3px solid purple;
}
/* Viết bởi Quantrimang.com */
Căn giữa theo chiều dọc - Sử dụng padding
Ví dụ này, chúng tôi sử dụng thuộc tính padding để căn giữa phần tử div
theo chiều dọc:
Website Quản trị mạng
To center both horizontally and vertically, use padding with attributes text-align: center.
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
Center vertically – Use line-height
You also have another way to vertically center it by using properties line-height with the same value as the attribute height.
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* Nếu văn bản có nhiều dòng, thêm vào như sau: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
For example:
.center {
line-height: 80px;
height: 80px;
border: 3px solid purple;
text-align: center;
}
/* Nếu văn bản có nhiều dòng, thêm vào như sau: */
/* Viết bởi Quantrimang.com */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
Căn giữa theo chiều dọc - Sử dụng line-height
Ví dụ này, chúng tôi sử dụng thuộc tính line-height có giá trị bằng
thuộc tính height để căn giữa phần tử div theo chiều dọc:
Website Quản trị mạng
Center vertically – Use position and transform
If not used padding and line-height As above, you can use the third way position and transform:
.center {
height: 200px;
position: relative;
border: 3px solid purple;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
For example:
/* Viết bởi Quantrimang.com */
.center {
height: 80px;
position: relative;
border: 3px solid purple;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Căn giữa theo chiều dọc - Sử dụng position và transform
Ví dụ này, chúng tôi sử dụng thuộc tính position và transform để căn
giữa phần tử div theo chiều dọc:
Website Quản trị mạng
Lưu ý: Thuộc tính transform không được hỗ trợ trong IE8 và các phiên bản
trước đó.
Note: Attributes transform Not supported in IE8 and earlier versions.
Pseudo-elements on grid
Similar to the Flexbox alternative, you can use a 3-row grid with pseudo-elements:
.container{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
}
.container::before,
.container::after{
content:"";
}
Align vertically up 50%: top:50%, translateY(-50%)
This is one of the first CSS alignment tricks and is still popular today. It is still popular with many programmers. By relying on absolute positioning, the inner component is 50% above the parent component. You can then change this number up to 50% of its height.
.container{
position: relative;
}
.element{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
This is a pretty solid approach, with the only drawback being that using compilers can interfere with transformations, for example when applying transitions or using animations.
Center the table
Another simple and popular method of using Align in CSS is to center the table using vertical-align. For example:
.container{
display: table;
height: 100%;
}
.element{
display: table-cell;
text-align: center;
vertical-align: middle;
}
This works even if the two elements have an unknown height. Of course, the main limitation here is that you may have some difficulty aligning the background.
Order clear reticles
The CSS grid style allows items to be explicitly placed on a specific row, so the same grid declaration as above and the item placed on the second row will suffice:
.container{
display:grid;
grid-template-columns:1fr;
grid-template-rows: repeat(3, 1fr);
}
.element{
grid-row: 2 / span 1; /* or grid-row: 2/3 */
}
You can apply this CSS alignment in IE 10. In fact, it is one of the first and most powerful browsers to support CSS grid. It has a completely different syntax but you can make it work.
.container{
display: -ms-grid;
-ms-grid-rows: (1fr)[3];
-ms-grid-columns: 1fr;
}
.element{
-ms-grid-column: 1;
-ms-grid-row: 2;
}
Several implementations are possible in the future
According to the CSS Box Alignment Module Level 3 description, align-content
will work on container block and multicol axis blocks. Therefore, you can center the contents of these containers just like you did in flex or grid containers.
As you can see, CSS provides many ways to align content when you program the web. Knowing them, the web development process will become easier.
Previous lesson: Display (inline-block) property in CSS
Next lesson: Combinator in CSS