Người Viết : ViKiMi Editor

Chúng ta cũng biết có rất nhiều lúc việc căn chỉnh các thành phần vào giữa theo chiều ngang là rất khó. Nó xảy ra rất nhàm chán.
Các phương thức chúng ta làm có thể không thực hiện nổi dù với trường hợp trước đó thì là ok. Chính bởi vậy chúng ta cần những cách chung chung và ấp dụng được.
Các phương thức giống như một ngữ cảnh áp dụng thay đổi cho các phần tử HTML mà chúng ta đang cố gắng để đưa vào center theo chiều dọc hay chiều ngang màn hình.
Với vấn đề như vậy thì trong tutorial này chúng ta sẽ học cách căn chỉnh các phần tử khác nhau theo chiều dọc hay chiều ngang hoặc là cả 2 chiều dọc hay ngang.
Làm thế nào để chỉnh Center theo chiều ngang.
Centering elements horizontally is generally easier than centering them vertically. Here are some common elements you may want to center horizontally and different ways to do it.
Cách chỉnh mọi thứ vào Center theo chiều ngang nói chung là dễ hơn theo chiều dọc. Chúng ta sẽ có một vài cách chung nhất để căn chỉnh Center theo chiều ngang và các cách khác nhau để làm điều này.
Học cách căn chỉnh Center cho text với thuộc tính CSS Text-Align Center.
Để căn chỉnh cho text hay link liên kết, hãy sử dụng thuộc tínhtext-align
với giá trịcenter
:
<style>
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
}
p {
/* Center horizontally*/
text-align: center;
}
</style>
<html>
<div class=”container“>
<p>Hello, (centered) all text!</p>
</div>
</html>
Học cách căn chỉnh Center một thẻ <DIV> với CSS Margin Auto
Chúng ta sẽ sử dụng cách ngắn gọn thuộc tính margin
với giá trị cần là 0 auto
để căn chỉnh bất kỳ khối phần tử nào chẳng hạn là div
vào giữa Center theo chiều dọc:
<style>
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
}
.child-level {
width: 50px;
height: 50px;
background-color: red;
/* Center horizontally*/
margin: 0 auto; /* Giúp căn chỉnh Center */
}
</style>
<html>
<div class=”container“>
<div class=”child-level“></div>
</div>
</html>
Học cách căn chỉnh Center thẻ DIV theo chiều ngang với Flexbox
Flexbox là một cách thức mẫu phổ biến để căn chỉnh mọi thứ trên Pages theo Center, và tạo thiết kế responsive layout web (Hiển thị trên nhiều thiết bị và nhiều trình duyệt) nhiều thuận lợi hơn. Tuy nhiên, chú ý là nó có hỗ trợ trên các trình duyệt không, đặc biệt là IE.
Để căn chỉnh Center phần tử theo chiều dọc với Flexbox, chúng ta dùngdisplay: flex
và justify-content: center
dành cho khung chứa là phần tử cha:
<style>
.container-pa {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
/* Center child elements horizontally*/
display: flex;
justify-content: center;
}
.child-align {
width: 50px;
height: 50px;
background-color: red;
}
</style>
<html>
<div class=”container-pa“>
<div class=”child-align“></div>
</div>
</html>
Làm thế nào để căn chỉnh Center mọi thứ theo chiều dọc
Chúng ta có nhiều cách làm nhé, và cuối cùng thì chúng ta sẽ sử dụng với Flexbox.
Học các căn chỉnh Center một Div theo chiều dọc với CSS absolute Positioning và Negative Margins
Cách làm rất đơn giản bạn chỉ cần chỉnh center theo chiều dọc và không cần quá suy nghĩ. Với cách này bạn sẽ phải có chiều cao của phần tử con mà bạn muốn căn chỉnh.
Đầu tiên, cần thiết lập thuộc tính position
của phần tử Cha là relative
.
Tiếp đó, với phần tử con child element, Hãy thiết lập thuộc tínhposition
là absolute
Và tiếp theo là căn chỉnh top
to 50%
:
<style>
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
/* Setup */
position: relative;
}
.child-center-Vertical {
width: 50px;
height: 50px;
background-color: red;
/* Center vertically */
position: absolute;
top: 50%;
}
</style>
<html>
<div class=”container“>
<div class=” child-center-Vertical“></div>
</div>
</html>
Nhưng điều đó thực sự chỉ căn giữa theo chiều dọc cạnh trên của phần tử con.
Để thực sự căn giữa Center phần tử con, hãy đặt thuộc tính margin-top là âm một nửa chiều cao của phần tử con (- half the child element’s height ):
<style>
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
/* Setup */
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/*
Center vertically */
position: absolute;
top: 50%;
margin-top: -25px; /* – Half this element’s height */
}
</style>
Học cách căn Center thẻ <DIV> theo chiều dọc với Transform và Translate
Nếu bạn không biết chiều cao height của phần tử bạn muốn căn chỉnh center ( hay tối thiểu bạn từng làm ) , Thì đây là một thủ thuật thuận tiện.
Đây là một cách thuận tiện rất giống cách căn chỉnh âm với margin phía trên. Hãy thiết lập thuộc tính position
cho phần tử cha là relative.
Và với phần tử con bạn hãy thiết lập thuộc tính position
là absolute
Và hãy thiết lập top
là 50%. Và bây giờ thay vì sử dụng margin âm ( margin-top: -25px ) để thiết lập căn chỉnh center cho phần tử con, thì hãy dùng là transform: translate(0, -50%)
:
<Style>
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
/* Setup */
position: relative;
}
. child-with-transform {
width: 50px;
height: 50px;
background-color: red;
/* Center vertically */
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
</Style>
<HTML>
<div class=”container“>
<div class=”child-with-transform“></div>
</div>
</HTML>
Chú ý : translate(0, -50%)
là cách viết ngắn gọn của translateX(0)
Và translateY(-50%)
. Bạn còn có thể viết là transform: translateY(-50%)
cũng được nhé.
Học cách căn chỉnh Center cho một thẻ DIV theo chiều dọc với Flexbox
Giống với cách căn chỉnh dành cho chiều ngang thì cách căn chỉnh với chiều dọc cũng vậy. Áp dụng cho căn chỉnh Center.
Để căn chỉnh thì chúng ta chỉ cần thiết lập display: flex Và
align-items: center
cho phần tử cha :
<Style>
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
/* Center vertically */
display: flex;
align-items: center;
}
.child-flexbox {
width: 50px;
height: 50px;
background-color: red;
}
</Style>
<HTML>
<div class=”container“>
<div class=”child-flexbox“></div>
</div>
</HTML>
Học cách căn chỉnh với cả chiều ngang và chiều dọc
Học cách căn chỉnh Center một thẻ <DIV> theo chiều ngang và chiều dọc với CSS Absolute Positioning Và Margins âm
Cách này cũng giống như phương thức căn chỉnh phía trên với mỗi phần tử theo chiều dọc. Và cũng giống như lần cuối, bạn cần biết chiều rộng width và chiều cao height khi bạn muốn căn chỉnh Center.
Hãy thiết lập cho phần ử cha thuộc tính position
: relative
.
Sau đó, hãy thiết lập thuộc tính cho phần tử con là position
: absolute
, top
: 50%
, Và thêm nữa left
: 50%
. Đây là cách căn chỉnh Center góc trên cùng bên trái của phần tử con theo cả chiều ngang và dọc. (Sẽ lấy góc trên cùng bên trái của phần tử con để căn chỉnh).
Tuy nhiên, để căn chỉnh thực sự Center cho phần tử con thì vẫn cần áp dụng margin-top, margin-left là âm cho phần tử con, chỉ số căn chỉnh là âm bằng một nửa chiều cao và một nửa chiều rộng của phần tử con.
<Style>
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
/* Setup */
position: relative;
}
.child-Center-vertially-horizontally {
width: 50px;
height: 50px;
background-color: red;
/* Center vertically and horizontally */
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
/* Note width : 50px; height : 50px; Apply negative top and left margins to truly center the element */
}
</Style>
<HTML>
<div class=”container“>
<div class=”child-Center-vertically-horizontally“></div>
</div>
</HTML>
Học cách căn chỉnh Center cho một thẻ <DIV> theo chiều dọc và chiều ngang với Transform và Translate
Sử dụng phương thức này để căn chỉnh Center theo cả chiều ngang và chiều dọc cho một phần tử và không cần biết chính xác kích thước và cũng không thể sử dụng Flexbox.
Đầu tiên, sẽ thiết lập thuộc tính cho phần tử cha là position
: relative
.
Tiếp theo hãy thiết lập thuộc tính cho phần tử con là position
: absolute
,
top
: 50%
, Và left
: 50%
.
Cuối cùng, hãy thiết lập cho phần tử con thuộc tính
transform: translate(-50%, -50%)
để căn Center nhé :
<Style>
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
/* Setup */
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Center vertically and horizontally */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /*Remember it*/
}
</Style>
<HTML>
<div class=”container“>
<div class=”child“></div>
</div>
</HTML>
Học cách căn chỉnh Center cho một thẻ <DIV> theo cả chiều dọc và chiều ngang bằng Flexbox
Flexbox chính là cách căn chỉnh Center dễ nhất cho cả chiều ngang cà chiều dọc.
Đây thực sự là cách kết hợp của 2 phương thức Flexbox phía trên (dành cho chiều ngang, chiều dọc ) . Chúng ta chỉ cần thiết lập thuộc tính cho phần tử cha là
justify-content: center
Và align-items: center
:
<Style>
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
/*
Center vertically and horizontally */
display: flex;
justify-content: center;
align-items: center;
}
.child-CenterVerticallyHorizontally-Use-Flexbox {
width: 50px;
height: 50px;
background-color: red;
}
</Style>
<HTML>
<div class=”container“>
<div class=”child-CenterVerticallyHorizontally-Use-Flexbox“></div>
</div>
</HTML>
Phần trên là những thứ giúp bạn căn chỉnh Center tất cả mọi thứ. Hãy áp dụng thật đúng cách và thuận tiện để có cách hiển thị tốt nhất.