Nội dung chính
Căn giữa bố cục trang web với CSS được xem là một thủ thuật khó. Nếu bạn đang tìm kiếm những hướng dẫn chi tiết căn giữa CSS đơn giản, dễ hiểu và lại đúng kiến thức, đừng bỏ qua bài viết này của ITviec nhé.
Đọc bài viết để hiểu rõ hơn:
- Vai trò căn giữa của CSS trên trang web
- Cách căn giữa CSS theo chiều ngang
- Cách căn giữa CSS theo chiều dọc
- Cách căn giữa CSS theo chiều ngang và chiều dọc
- Giải đáp các câu hỏi thường gặp
Vai trò căn giữa CSS trên trang web là gì?
Căn giữa trong CSS là quy trình điều chỉnh vị trí, đưa các phần tử trên trang web về phía trung tâm so với phần tử chứa chúng hoặc giữa màn hình. Kỹ thuật này mang lại nhiều lợi ích quan trọng cho thiết kế website.
Tạo bố cục chuyên nghiệp: Căn giữa giúp phân phối không gian một cách đồng đều, tạo sự thống nhất đặc biệt khi tích hợp nhiều loại nội dung khác nhau. Điều này đặc biệt hữu ích khi muốn làm nổi bật các yếu tố quan trọng như tiêu đề, logo, hình ảnh,…
Nâng cao trải nghiệm : Bố cục cân đối và giao diện hấp dẫn giúp người sử dụng dễ dàng tiếp cận nội dung trên trang web. Nó cũng giúp họ tập trung vào thông tin quan trọng mà bạn muốn truyền tải.
Tăng khả năng tiếp cận: Căn giữa cũng làm cho trang web dễ dàng đáp ứng với các thiết bị và kích thước màn hình khác nhau, từ điện thoại thông minh đến máy tính bàn và nhiều thiết bị khác. Điều này tạo ra sự linh hoạt cho người dùng khi truy cập từ bất kỳ thiết bị nào.
Hướng dẫn 5 cách căn giữa CSS theo chiều ngang
Cách 1: Sử dụng text-align: center;
Để căn giữa nội dung của một phần tử văn bản hoặc phần tử con bên trong một phần tử khác, bạn có thể sử dụng thuộc tính text-align:center. Phạm vi áp dụng của thuộc tính này gồm:
- Phần tử block: text-align:center sẽ căn giữa tất cả các phần tử văn bản và phần tử con bên trong nó. Chẳng hạn bạn tạo một block <div> và căn giữa bằng thuộc tính text-align:center, các đoạn văn bản, hình ảnh hoặc bất kỳ phần tử nào bên trong phần tử <div> đó sẽ được căn giữa.
- Văn bản: Đối với phần tử văn bản như <p> hoặc <h1>, text-align:center sẽ căn giữa nội dung văn bản bên trong phần tử đó theo trục ngang.
- Inline element (phần tử nội dung): text-align: center không hoạt động trực tiếp trên các phần tử inline như <span>. Tuy nhiên, nếu bạn đặt một phần tử inline trong một phần tử block rồi áp dụng text-align: center cho phần tử block đó, thì nội dung inline sẽ được căn giữa theo trục ngang.
- Table và inline-block elements: Cũng giống như các phần tử block, phần tử table hoặc phần tử inline-block sẽ được căn giữa khi bạn áp dụng text-align: center.
Ví dụ:
|
HTML |
CSS |
<div class="container"> <p>Hello, (centered) World!</p> </div> |
.container { font-family: arial; font-size: 24px; margin: 25px; width: 350px; height: 200px; outline: dashed 1px black; } p { /* Căn giữa theo chiều ngang */ text-align: center; } |
Kết quả hiển thị hình ảnh cho đoạn code trên:
Cách 2: Sử dụng margin: 0 auto;
Thuộc tính margin trong CSS được sử dụng để xác định khoảng cách giữa các phần tử hoặc viền của phần tử với phần tử lân cận hay với biên của viewport (khung nhìn của trình duyệt). Giá trị của thuộc tính margin có thể được đặt theo nhiều cách. Trong đó, để căn giữa CSS bạn có thể sử dụng thuộc tính margin với giá trị left và right là auto.
- Khi bạn đặt margin-left và margin-right thành auto (margin-left: auto; margin-right: auto;) trình duyệt sẽ tự động tính toán khoảng cách cần thiết để căn giữa element trong container của nó.
- Cách này chỉ hoạt động khi element có chiều rộng cố định. Nếu element có chiều rộng auto, nó sẽ tự động chiếm toàn bộ chiều rộng của container và không thể căn giữa được.
Ví dụ căn giữa thành phần box bằng cách đặt margin-left và margin-right thành auto.
Ngoài ra, bạn cũng có thể viết rút gọn thuộc tính này thành margin: 0 auto;. Trong đó, 0 là giá trị top-bottom và auto là áp dụng cho left-right.
Cách 3: Sử dụng left: 50% và margin-left âm nửa chiều rộng
Phương pháp này hoạt động bằng cách đặt vị trí trái của phần tử thành 50% của phần tử cha và sau đó di chuyển nó sang trái bằng một nửa chiều rộng của chính nó (Lưu ý: phần tử cha phải có chiều rộng được xác định trước). Đây là phương pháp truyền thống và được hỗ trợ rộng rãi trên nhiều trình duyệt.
Ví dụ:
| HTML | CSS |
<div class="can-giua"> Nội dung của bạn </div> |
.can-giua { position: absolute; width: 100px; left: 50%; margin-left: -50px; } |
Cách 4: Sử dụng transform: translateX(-50%);
Trong CSS, để căn giữa một phần tử theo chiều ngang khi chưa biết trước chiều rộng của phần tử cha, bạn có thể sử dụng transform: translateX(-50%) bằng các bước sau:
- Xác định phần tử bạn muốn căn giữa và đảm bảo rằng nó đã được định dạng theo ý muốn, ví dụ như đã thiết lập position: absolute; hoặc position: fixed;.
- Sử dụng thuộc tính left: 50%; để di chuyển phần tử đến vị trí ngang giữa theo phần trăm của phần tử cha gần nhất.
- Sử dụng transform: translateX(-50%); để di chuyển phần tử ngược lại 50% của chiều rộng của chính nó, điều này sẽ căn giữa phần tử theo chiều ngang.
Ví dụ:
|
HTML |
CSS |
<div class="parent"> <div class="child"></div> </div> |
.parent { position: relative; border: 1px solid green; display: inline-block; padding: 25px; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } |
Kết quả hiển thị hình ảnh cho đoạn code trên:
Cách 5: Sử dụng Flexbox
Flexbox là cách thức hiện đại nhất để căn giữa các element trên trang web, giúp việc thiết kế giao diện đáp ứng (responsive layout) dễ dàng hơn nhiều so với trước đây. Tuy nhiên, Flexbox chưa được hỗ trợ đầy đủ trên một số trình duyệt cũ như Internet Explorer.
Để căn giữa một element theo chiều ngang với Flexbox, chỉ cần áp dụng display: flex và justify-content: center cho phần tử cha.
Ví dụ:
|
HTML |
CSS |
<div class="container"> <div class="child"></div> </div> |
.container { font-family: arial; font-size: 24px; margin: 25px; width: 350px; height: 200px; outline: dashed 1px black; /* Căn giữa phần tử con */ display: flex; justify-content: center; } .child { width: 50px; height: 50px; background-color: red; } |
Hướng dẫn 3 cách căn giữa CSS theo chiều dọc
Cách 1: Sử dụng top: 50% và margin-top âm nữa chiều cao
Trong một thời gian dài, đây là cách phổ biến để căn giữa các phần tử theo chiều dọc. Để sử dụng phương pháp này, bạn cần biết chiều cao của phần tử mà bạn muốn căn giữa.
- Trước tiên, hãy đặt thuộc tính position của phần tử cha thành relative.
- Sau đó, đối với phần tử con, hãy đặt thuộc tính position thành absolute và top thành 50%. Tiếp theo sử dụng margin-top với giá trị âm bằng nửa chiều cao của phần tử (Ví dụ: Nếu phần tử con có chiều cao là 100px, thì bạn sẽ sử dụng margin-top: -50px;)
|
HTML |
CSS |
<div class="container"> <div class="child"></div> </div> |
.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; /* Căn giữa theo chiều dọc */ position: absolute; top: 50%; margin-top: -50px; } |
Cách 2: Sử dụng transform: translate(0, -50%); hoặc transform: translateY(-50%)
Nếu bạn không biết chiều cao của phần tử bạn muốn căn giữa thì sử dụng transform & translate chính là một thủ thuật rất có ích. Với cách căn giữa này, bạn đặt thuộc tính vị trí của phần tử cha thành tương đối.
Đối với phần tử con, đặt thuộc tính position thành absolute và đặt top thành 50%. Bây giờ, thay vì sử dụng margin âm để căn giữa phần tử con, chỉ cần sử dụng transform: translate(0, -50%);
Ví dụ:
| HTML | CSS |
<div class="container"> <div class="child"></div> </div> |
.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; /* Căn giữa theo chiều dọc */ position: absolute; top: 50%; transform: translate(0, -50%); } |
Lưu ý rằng translate(0, -50%) là dạng viết tắt của translateX(0) và translateY(-50%). Bạn cũng có thể sử dụng transform: translateY(-50%) để căn giữa theo chiều dọc phần tử con.
Cách 3: Sử dụng line-height
Bạn có thể căn giữa CSS theo chiều dọc bằng cách thiết lập giá trị line-height. Tuy nhiên, phương pháp này hiệu quả để căn giữa một dòng văn bản duy nhất, nhưng không hiệu quả với nhiều dòng.
Để việc căn giữa bằng line-height hoạt động đúng, bạn cần đảm bảo giá trị line-height của phần tử con phải bằng giá trị height của phần tử cha.
Ví dụ:
<!DOCTYPE html> <html> <head> <style> .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; } </style> </head> <body> <h2>Center with line-height</h2> <p>In this example, we use the line-height property with a value that is equal to the height property to center the div element:</p> <div class="center"> <p>I am vertically and horizontally centered.</p> </div> </body> </html>
Hướng dẫn 4 cách căn giữa CSS theo hai chiều
Cách 1: Sử dụng CSS Absolute Positioning và Negative Margins
Đây là phương pháp kết hợp giữa cách căn giữa theo chiều dọc và theo chiều ngang sử dụng margin âm ở phía trên. Giống như lần trước, bạn cần phải xác định được chiều rộng và chiều cao của element muốn căn giữa để sử dụng giá trị thích hợp cho thuộc tính margin-left và margin-right.
Cách 2: Sử dụng auto với absolute elements
Thông thường, bạn có thể sử dụng margin: auto để căn giữa các thành phần trong HTML. Tuy nhiên, cách này lại không hiệu quả với các thành phần được định vị tuyệt đối (absolute positioning). Khi này, bạn có thể sử dụng thuộc tính auto.
Nếu cả ba “left” , “width” và “right” là auto: thì trước tiên, bạn cần điều chỉnh giá trị cho “margin-left” và “margin-right” bằng 0. Ngược lại, nếu cả 3 chỉ số này không phải là auto hoặc chỉ có “margin-left” và “margin-right” là auto, bạn cần chỉnh hai lề có giá trị bằng nhau.
Tương tự cho thuộc tính “height”, “top” và “bottom”. Điều này có nghĩa là bạn có thể căn giữa một phần tử tuyệt đối:
- Theo chiều ngang nếu thuộc tính left và right có cùng giá trị và width (chiều rộng) cố định.
- Theo chiều dọc nếu thuộc tính top và bottom có cùng giá trị và height (chiều cao) cố định.
Bằng cách sử dụng các ngoại lệ này, bạn có thể gán các thuộc tính bên dưới để căn giữa một phần tử tuyệt đối trong phần tử mẹ của nó.
Ví dụ:
.parent { position: relative; height: 150px; } .child { position: absolute; margin: auto; inset: 0; /* đặt left, right, top và bottom về 0 */ width: 70px; height: 20px; }
inset: 0 là cách viết tắt để đặt tất cả bốn thuộc tính – left, right, top và bottom là 0.
Ngoài ra, bạn cũng có thể kết hợp các thuộc tính left, top và transform:translate để thực hiện điều này:
Ví dụ:
.parent { position: relative; } /* sử dụng phương pháp này để căn giữa element absolute */ .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
Cách 3: Sử dụng Flexbox
Để căn giữa element(s) con theo cả hai hướng ngang và dọc, hãy áp dụng justify-content: center và align-items: center cho phần tử cha:
|
HTML |
CSS |
<div class="container"> <div class="child"></div> </div> |
.container { font-family: arial; font-size: 24px; margin: 25px; width: 350px; height: 200px; outline: dashed 1px black; /* Căn giữa theo chiều dọc và chiều ngang */ display: flex; justify-content: center; align-items: center; } .child { width: 50px; height: 50px; background-color: red; } |
Cách 4: Sử dụng grid
Một phương pháp khác bạn có thể sử dụng để căn giữa một hộp bên trong một hộp khác là biến hộp chứa thành grid container (bộ chứa dạng lưới) trước, sau đó đặt thuộc tính place-items của nó thành center để căn giữa các mục theo cả trục khối (block axis) và trục nội tuyến (inline axis).
| HTML | CSS |
<div class="container"> <div class="item">I am centered!</div> </div> |
div { border: solid 3px; padding: 1em; max-width: 75%; } .container { display: grid; place-items: center; height: 8em; } |
Thay vì sử dụng place-items: center; cho hộp chứa, bạn có thể đạt được hiệu ứng căn giữa tương tự bằng cách đặt place-content: center; cho hộp chứa, hoặc áp dụng place-self: center hoặc margin: auto; trực tiếp cho phần tử bên trong.
Câu hỏi thường gặp về căn giữa CSS
Làm cách nào để căn giữa trang web trong CSS?
Có nhiều cách để căn giữa trang web trong CSS:
- Căn giữa văn bản: Sử dụng text-align: center;
- Căn giữa một phần tử: Sử dụng margin: 0 auto hoặc flexbox;
- Căn giữa toàn bộ trang web: Sử dụng margin: 0 auto; cho phần tử body hoặc CSS Grid.
Những thuộc tính nào giúp căn giữa trong CSS Grid?
Trong bố cục lưới CSS (CSS grid layout), cả lưới bên trong vùng chứa và các thành phần của lưới có thể được định vị bằng 6 thuộc tính sau: justify-items, align-items, justify-content, align-content, justify-self và align-self.
Tổng kết về hướng dẫn căn giữa CSS
Có rất nhiều phương pháp căn giữa CSS, trong bài viết này ITviec đã hướng dẫn bạn ba phương pháp căn giữa phổ biến nhất gồm:
- Căn giữa theo chiều ngang: Sử dụng thuộc tính text-align: center; margin: 0 auto, display: flex,…
- Căn giữa theo chiều dọc: Sử dụng thuộc tính position và negative margin, line-height,…
- Căn giữa theo cả hai chiều: Sử dụng thuộc tính display: flex; justify-content: center; align-items: center;…
Bạn thấy bài viết hay và hữu ích? Đừng ngại Share với bạn bè và đồng nghiệp nhé.
Và nhanh tay tham khảo việc làm IT “chất” trên ITviec!