Căn giữa CSS 2 chiều – Khi làm việc với CSS, chúng tôi nghĩ về các phần tử trang là các hộp và cách sắp xếp các hộp này thể hiện khái niệm về bố cục CSS.
Đương nhiên, mọi phần tử trang đều có vị trí bình thường bên trong luồng bố cục tài liệu. Nhưng đôi khi, chúng tôi thay đổi hành vi mặc định để tạo bố cục chính xác mà chúng tôi muốn. Điều này xảy ra khi chúng ta muốn Căn giữa CSS các đối tượng bên trong một đối tượng khác trong tài liệu của chúng ta.
Đây là một nhiệm vụ phổ biến trong quá trình phát triển, tuy nhiên, trong những năm qua, nhiệm vụ này dường như đã trở nên khó khăn và phức tạp, đặc biệt là khi tập trung vào trục tung.
Điều này khiến các nhà phát triển phải dùng đến tất cả các loại hack và cách giải quyết không thể quản lý, như sử dụng thuộc tính bảng CSS gây ra sự mâu thuẫn trong trình duyệt và không thành công trên trình đọc màn hình hoặc sử dụng định vị tuyệt đối với lề âm chỉ Căn giữa CSS các đối tượng có chiều rộng xác định.
Một thủ thuật khác là sử dụng và thuộc tính để Căn giữa CSS các phần tử trong một vùng chứa. Tuy nhiên, phương pháp này có thể tạo ra các bố cục khó xử và chỉ cho phép một phần tử trên mỗi vùng chứa mà không cần thực hiện thêm.position: absolute;transform
Về bản chất, các nhà phát triển sử dụng các cách hack khác nhau để Căn giữa CSS các đối tượng tùy thuộc vào nhiệm vụ, đó là nguyên nhân gây ra nỗi đau của việc căn giữa các đối tượng: có quá nhiều cách giải quyết.
Tuy nhiên, trong CSS hiện đại, chúng ta không cần phải trải qua căng thẳng này nữa vì giờ đây chúng ta có nhiều quyền kiểm soát hơn đối với cách chúng ta Căn giữa CSS các đối tượng trong bố cục hai chiều.
Trong hướng dẫn này, chúng ta sẽ xem xét các kỹ thuật Căn giữa CSS 2 chiều hiện đại trong CSS đồng thời làm theo các phương pháp hay nhất để căn giữa các đối tượng có tỷ lệ phù hợp trên các thiết bị và màn hình.
Hiểu căn giữa CSS 2 chiều
Như tên của nó, Căn giữa CSS 2 chiều có nghĩa đen là “căn giữa hai hướng”.
Trong ngữ cảnh của CSS, nó được hiểu là căn giữa các đối tượng theo hai hướng, tức là cả hướng nằm ngang, còn được gọi là trục chính và hướng dọc còn được gọi là trục chéo.
Chúng ta cũng có thể coi hai chiều là bất cứ thứ gì hoạt động theo hai hướng ngược nhau và không bị ảnh hưởng bởi hướng của dòng chảy.
Bằng cách áp dụng khái niệm này trong ngữ cảnh của CSS, các đối tượng Căn giữa CSS2 chiều sẽ không bị ảnh hưởng bởi việc thay đổi hướng của luồng bố cục.
Nói cách khác, đối tượng vẫn ở trung tâm bất kể luồng bố cục, nghĩa là, cho dù hướng viết từ trái sang phải ltr, như văn bản tiếng Anh; rtl, giống như văn bản tiếng Ả Rập; hoặc khi chế độ viết được đặt thành , như tiếng Nhật và tiếng Mông Cổ.vertical-*
Căn giữa một chiều
Căn giữa một hướng liên quan đến căn giữa một hướng, có nghĩa là căn giữa một đối tượng theo chiều ngang hoặc chiều dọc. Trong trường hợp này, căn giữa của đối tượng phụ thuộc vào hướng của luồng của bố cục.
Hãy cùng xem cách căn giữa một chiều hoạt động để hiểu rõ hơn về cách căn giữa hai hướng hoạt động.
Ở đây, chúng tôi có một đánh dấu HTML tạo bố cục sau:
<div class="container">
<div class="obj">Center this obj</div>
</div>
Chúng tôi đã tạo kiểu cho đối tượng để xem vị trí ban đầu trong luồng bố cục tài liệu xem xét ltrhướng viết. Bây giờ, bằng cách căn giữa đối tượng theo chiều dọc bên trong vùng chứa của nó, chúng ta có những điều sau:
Ở đây, chúng ta có thể sử dụng CSS flex để căn giữa đối tượng theo chiều dọc:
.container {
display: flex;
align-items: center;
/* ... */
}
Hiện tại, hãy bỏ qua mã và tập trung vào định vị đối tượng. Nếu chúng ta thay đổi chế độ viết hoặc hướng viết của tài liệu này, thì việc căn chỉnh tâm theo chiều dọc của đối tượng có xu hướng bị ảnh hưởng.
Đoạn mã dưới đây thay đổi chế độ viết thành , như chúng ta sẽ tìm thấy trong văn bản tiếng Mông Cổ:vertical-*
.container {
/* ... */
writing-mode: vertical-lr;
}
Kiểu bổ sung này tạo ra một bố cục mới:
Như chúng ta có thể thấy, căn giữa của đối tượng phụ thuộc vào hướng của luồng bố cục, đó là căn giữa một hướng.
Mặt khác, với căn giữa hai chiều, một đối tượng phải nằm ở trung tâm bất kể hướng của luồng bố cục, như được thấy bên dưới.
Tiếp theo, chúng ta hãy xem làm thế nào để đạt được kiểu căn giữa đối tượng này.
Căn giữa đối tượng bằng cách sử dụng các thuộc tính positionvàtransform
Như đã đề cập trước đó, sử dụng phương pháp này được coi là một kỹ thuật kế thừa. Nhưng bản chất của việc sử dụng thủ thuật này là để chúng ta thấy được những hạn chế và đánh giá tốt hơn các kỹ thuật hiện đại mà chúng ta sẽ đề cập sau đây.position: absolute;
Hãy xem lại đánh dấu trước đó của chúng tôi:
<div class="container">
<div class="obj">Center this obj</div>
</div>
Để căn giữa phần tử con trong vùng chứa, chúng ta có thể chỉ cần áp dụng mã này:
.container {
position: relative;
/* ... */
}
.obj {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* ... */
}
Bằng cách đặt vùng chứa a và phần tử ở giữa một nghĩa là chúng ta có thể di chuyển phần tử vào giữa vùng chứa .position: relative;position: absolute;
Một hạn chế của việc sử dụng phương pháp này là nó thường chỉ cho phép một phần tử trên mỗi vùng chứa mà không có các kiểu bổ sung. Nó cũng có thể gây ra một bố cục khó hiểu do văn bản chồng chéo.
Vì vậy, thay vì sử dụng hack này hoặc bất kỳ cách nào khác, chúng ta sẽ học các kỹ thuật hiện đại.
Căn giữa đối tượng bằng CSS flexbox
Với CSS flexbox, chúng ta có thể dễ dàng kiểm soát vị trí của các đối tượng bên trong đối tượng khác. Khi chúng ta áp dụng cho một phần tử cha, điều đó có nghĩa là chúng ta muốn các phần tử con trực tiếp trở thành các mục linh hoạt để chúng ta có thể áp dụng các thuộc tính căn chỉnh để kiểm soát các mục.display: flex
Một lần nữa, hãy sử dụng đánh dấu HTML trước đó:
<div class="container">
<div class="obj">Center this obj</div>
</div>
Bằng cách làm cho phần tử vùng chứa trở thành vùng chứa linh hoạt và áp dụng các thuộc tính căn chỉnh, như được thấy bên dưới, chúng ta có phần tử con được căn giữa một cách hoàn hảo trong vùng chứa.
.container {
display: flex;
align-items: center;
justify-content: center;
/* ... */
}
Các áp dụng cho các trung tâm chứa flex phần tử con theo chiều dọc trong khi trung tâm các yếu tố ở trên trục chính, có nghĩa là, theo chiều ngang.align-items:center;justify-content: center;
Một trong những ưu điểm của phương pháp này so với các kỹ thuật truyền thống là tính linh hoạt. Chúng ta có thể căn giữa nhiều đối tượng một cách liền mạch trong một vùng chứa và chỉ điều đó đã khuyến khích khả năng bảo trì mã.
Một ví dụ thực tế về căn giữa hai chiều bằng cách sử dụng flexbox
Chúng ta có thể tìm thấy các ví dụ thực tế khi xử lý phần chính của một trang, thông báo bật lên hoặc các lớp phủ ở giữa.
Trong phần này, chúng ta sẽ thấy cách chúng ta có thể căn giữa nội dung anh hùng của một trang một cách hoàn hảo. Hãy xem xét đánh dấu sau:
<section class="hero">
<h1>
<!-- ... -->
</h1>
<p>
<!-- ... -->
</p>
<button>Contact us</button>
</section>
Bằng cách áp dụng các thuộc tính flex và căn chỉnh trên phần tử vùng chứa mẹ section, chúng ta có các phần tử con được căn giữa một cách hoàn hảo trong vùng chứa:
.hero {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
/* ... */
}
Sau đó chúng tôi nhận được kết quả sau:
Trong mã CSS, chúng tôi đã thêm a cùng với các thuộc tính căn chỉnh để làm cho nội dung có vị trí dọc theo trục chéo.flex-direction: column;
Điều này là do flexbox là mô hình bố cục một chiều, có nghĩa là nó xử lý bố cục theo một chiều tại một thời điểm, hàng hoặc cột. Và, theo mặc định, giá trị được đặt thành , làm cho nội dung ở vị trí dọc theo trục chính.flex-directionrow
Bằng cách thêm , chúng tôi thay đổi mặc định để căn chỉnh theo chiều dọc.flex-direction: column;
Căn giữa hình ảnh và các yếu tố nội dòng
Phương pháp này không chỉ hoạt động để căn giữa các khối văn bản như chúng ta đã thấy ở trên; chúng ta cũng có thể căn giữa hình ảnh và các phần tử nội dòng như liên kết văn bản neo.
Trong một dự án thực tế, chúng ta có thể muốn thêm một hình ảnh và một liên kết văn bản cùng với các khối văn bản khác vào giữa. Vì vậy, hãy xem đánh dấu cho điều đó và triển khai phương thức flexbox để căn giữa nội dung:
<section class="hero">
<img src="..." alt="" />
<h1>...</h1>
<p>...</p>
<a href="#">...</a>
</section>
Một lần nữa, chúng tôi đã xóa nội dung của các phần tử cho ngắn gọn. Sử dụng các thuộc tính flexbox giống nhau, chúng tôi có nội dung của mình được căn giữa một cách hoàn hảo, như sau:
Như chúng ta có thể thấy với flexbox, việc căn giữa các đối tượng rất đơn giản và dễ quản lý. Phương pháp này rất linh hoạt nên chúng ta có thể thêm hoặc xóa nội dung vào / khỏi vùng chứa linh hoạt mà vẫn có căn giữa hoàn hảo mà không cần thêm kiểu.
Trong hầu hết các trường hợp trong dự án đời thực của chúng tôi, chúng tôi sẽ thường sử dụng phương pháp này để căn giữa các đối tượng.
Hỗ trợ trình duyệt Flexbox
Flexbox được hỗ trợ bởi tất cả các trình duyệt hiện đại, vì vậy chúng tôi có thể tự tin sử dụng nó để căn giữa các đối tượng trong bố cục của mình. Xem hỗ trợ trình duyệt hiện tại đây.
Căn giữa đối tượng bằng cách sử dụng lưới CSS
Giống như flexbox, chúng ta cũng có thể áp dụng a cho một phần tử vùng chứa để các phần tử con trực tiếp trở thành các mục lưới. Sau đó, chúng ta có thể sử dụng thuộc tính căn chỉnh để căn giữa nội dung trong vùng chứa.display: grid;
Các mã CSS sau tập trung các đối tượng trong một vùng chứa:
.container {
display: grid;
place-content: center;
/* ... */
}
CSS này tạo ra căn giữa tương tự như trong ví dụ flexbox .
Ở đây, chúng tôi chỉ sử dụng hai dòng CSS. Các điều khiển thuộc tính CSS như thế nào nội dung được liên kết và chứng minh cùng một lúc. Và, bằng cách chỉ định một giá trị, các mục sẽ căn chỉnh trung tâm trong vùng chứa.place-contentcenter
Viết tắt của và , nghĩa là chúng ta có thể viết lại CSS ở trên để trông giống như sau:place-contentalign-contentjustify-content
.container {
display: grid;
align-content: center;
justify-content: center;
/* ... */
}
Một ví dụ thực tế về căn giữa hai chiều bằng cách sử dụng lưới
Sử dụng cùng một ví dụ về anh hùng như được đề cập trong phần flexbox, thay vào đó, hãy áp dụng các kiểu lưới sau:
.hero {
display: grid;
place-content: center;
/* ... */
}
Sau đó, chúng tôi có kết quả sau.
Như đã thấy trong hình, nút Liên hệ với chúng tôi có chiều rộng của nội dung xung quanh. Điều này là do khi thuộc tính CSS áp dụng cho vùng chứa lưới, các mục lưới ngay lập tức có kích thước của mục có chiều rộng lớn nhất .place-content
Hiệu ứng này mang lại sự khác biệt khi so sánh với phương pháp flexbox. Và bây giờ, tùy thuộc vào cách bố trí mà chúng ta muốn, chúng ta có thể dễ dàng quyết định sử dụng phương pháp nào trong số các phương pháp này.
Nhưng một lần nữa, trong hầu hết các trường hợp, chúng ta sẽ sử dụng flexbox để căn giữa các đối tượng vì nó có thể tạo ra bất kỳ bố cục căn giữa nào một cách liền mạch mà chúng ta muốn.
Hỗ trợ trình duyệt bố cục lưới
Lưới, không giống như flexbox, ít hỗ trợ trình duyệt hơn .
Sự kết luận
Thay vì sử dụng hàng chục kỹ thuật bao gồm cả các bản hack kế thừa không cần thiết để căn giữa các đối tượng, giờ đây chúng ta có những cách hiện đại có thể sử dụng để căn giữa bất kỳ loại đối tượng nào.
Chúng tôi cũng đề cập đến các ví dụ thực tế và các phương pháp hay nhất để chúng tôi biết cách áp dụng chúng trong các dự án của riêng mình.
Tôi hy vọng bạn thích đọc hướng dẫn này. Nếu bạn có thắc mắc hoặc đóng góp, hãy chia sẻ chúng trong phần bình luận. Và cuối cùng, hãy cố gắng chia sẻ hướng dẫn này trên khắp trang web.
