Flexbox: căn giữa theo chiều ngang và chiều dọc

738
bsr 2013-09-27 01:22.

Cách căn giữa div theo chiều ngang và chiều dọc trong vùng chứa bằng cách sử dụng flexbox. Trong ví dụ dưới đây, tôi muốn mỗi số bên dưới nhau (theo hàng), được căn giữa theo chiều ngang.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
<div class="flex-container">
  <div class="row">
    <span class="flex-item">1</span>
  </div>
  <div class="row">
    <span class="flex-item">2</span>
  </div>
  <div class="row">
    <span class="flex-item">3</span>
  </div>
  <div class="row">
    <span class="flex-item">4</span>
  </div>
</div>

http://codepen.io/anon/pen/zLxBo

11 answers

802
Marc Audet 2013-09-27 02:13.

Tôi nghĩ rằng bạn muốn một cái gì đó như sau.

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row {
    width: auto;
    border: 1px solid blue;
}
.flex-item {
    background-color: tomato;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}
<div class="flex-container">
    <div class="row"> 
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>
</div>

Xem demo tại: http://jsfiddle.net/audetwebdesign/tFscL/

Các .flex-itemphần tử của bạn phải ở mức khối ( divthay vì span) nếu bạn muốn chiều cao và phần đệm trên cùng / dưới cùng hoạt động bình thường.

Ngoài ra, trên .row, hãy đặt chiều rộng autothay vì 100%.

.flex-containerTài sản của bạn vẫn ổn.

Nếu bạn muốn căn .rowgiữa theo chiều dọc trong cổng xem, hãy chỉ định 100% chiều cao cho htmlbodyvà cũng bằng không các bodylề.

Lưu ý rằng .flex-containercần chiều cao để xem hiệu ứng căn chỉnh theo chiều dọc, nếu không, vùng chứa sẽ tính chiều cao tối thiểu cần thiết để bao bọc nội dung, nhỏ hơn chiều cao cổng xem trong ví dụ này.

Chú thích:
Các flex-flow, flex-direction, flex-wrapthuộc tính có thể đã thực hiện thiết kế này dễ thực hiện hơn. Tôi nghĩ rằng vùng .rowchứa là không cần thiết trừ khi bạn muốn thêm một số kiểu dáng xung quanh các phần tử (hình nền, đường viền, v.v.).

Một nguồn hữu ích là: http://demo.agektmr.com/flexbox/

277
Michael Benjamin 2015-10-10 15:06.

Cách căn giữa các phần tử theo chiều dọc và chiều ngang trong Flexbox

Dưới đây là hai giải pháp định tâm chung.

Một cho các mục flex căn chỉnh theo chiều dọc ( flex-direction: column) và một cho các mục flex căn chỉnh theo chiều ngang ( flex-direction: row).

Trong cả hai trường hợp, chiều cao của các div ở giữa có thể thay đổi, không xác định, không xác định, bất cứ điều gì. Chiều cao của các div ở giữa không quan trọng.

Đây là HTML cho cả hai:

<div id="container"><!-- flex container -->

    <div class="box" id="bluebox"><!-- flex item -->
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox"><!-- flex item -->
        <p>DIV #2</p>
    </div>

</div>

CSS (không bao gồm các kiểu trang trí)

Khi các mục flex được xếp chồng lên nhau theo chiều dọc:

#container {
    display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    height: 300px;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* will center text in <p>, which is not a flex item */
}

BẢN GIỚI THIỆU


Khi các mục flex được xếp chồng lên nhau theo chiều ngang:

Điều chỉnh flex-directionquy tắc từ đoạn mã trên.

#container {
    display: flex;
    flex-direction: row;     /* make main axis horizontal (default setting) */
    justify-content: center; /* center items horizontally, in this case */
    align-items: center;     /* center items vertically, in this case */
    height: 300px;
}

BẢN GIỚI THIỆU


Căn giữa nội dung của các mục linh hoạt

Phạm vi của ngữ cảnh định dạng linh hoạt được giới hạn trong mối quan hệ cha-con. Con cháu của một thùng chứa flex ngoài con cái không tham gia vào bố cục flex và sẽ bỏ qua các thuộc tính flex. Về cơ bản, các thuộc tính flex không thể kế thừa được ngoài phần con.

Do đó, bạn sẽ luôn cần áp dụng display: flexhoặc display: inline-flexcho một phần tử cha để áp dụng các thuộc tính flex cho phần tử con.

Để căn giữa văn bản theo chiều dọc và / hoặc theo chiều ngang hoặc nội dung khác có trong một mục linh hoạt, hãy đặt mục này thành một vùng chứa linh hoạt (lồng nhau) và lặp lại quy tắc căn giữa.

.box {
    display: flex;
    justify-content: center;
    align-items: center;        /* for single line flex container */
    align-content: center;      /* for multi-line flex container */
}

Thông tin chi tiết tại đây: Làm thế nào để căn chỉnh theo chiều dọc văn bản bên trong hộp linh hoạt?

Ngoài ra, bạn có thể áp dụng margin: autocho phần tử nội dung của mục linh hoạt.

p { margin: auto; }

Tìm hiểu về autolề flex tại đây: Các phương pháp để căn chỉnh các mục Flex (xem hộp # 56).


Căn giữa nhiều dòng mục linh hoạt

Khi một vùng chứa linh hoạt có nhiều dòng (do bao bọc), thuộc align-contenttính sẽ cần thiết cho việc căn chỉnh trục chéo.

Từ thông số kỹ thuật:

8,4. Đóng gói Flex Lines: align-content tài sản

Các align-contentbất động sản Canh lề đường một container flex trong container flex khi có thêm không gian trong cross-trục, tương tự như cách justify-contentCanh lề mục riêng lẻ trong chính trục. Lưu ý, thuộc tính này không ảnh hưởng đến vùng chứa flex một dòng.

Chi tiết hơn tại đây: Flex-wrap hoạt động như thế nào với căn chỉnh tự, căn chỉnh mục và căn chỉnh nội dung?


Hỗ trợ trình duyệt

Flexbox được hỗ trợ bởi tất cả các trình duyệt chính, ngoại trừ IE <10 . Một số phiên bản trình duyệt gần đây, chẳng hạn như Safari 8 và IE10, yêu cầu tiền tố của nhà cung cấp . Để thêm tiền tố một cách nhanh chóng, hãy sử dụng Autoprefixer . Thêm chi tiết trong câu trả lời này .


Giải pháp căn giữa cho các trình duyệt cũ hơn

Để biết giải pháp căn giữa thay thế bằng cách sử dụng bảng CSS và thuộc tính định vị, hãy xem câu trả lời sau: https://stackoverflow.com/a/31977476/3597276

46
ben 2017-04-13 03:06.

Thêm vào

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

vào phần tử vùng chứa của bất kỳ thứ gì bạn muốn căn giữa. Tài liệu: justify-contentalign-items .

29
QMaster 2014-06-15 02:02.

Đừng quên sử dụng các thuộc tính quan trọng của trình duyệt cụ thể:

align-items: trung tâm; ->

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

justify-content: trung tâm; ->

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Bạn có thể đọc hai liên kết này để hiểu rõ hơn về flex: http://css-tricks.com/almanac/properties/j/justify-content/http://ptb2.me/flexbox/

Chúc may mắn.

17
MelanieP 2018-02-26 12:05.

1 - Đặt CSS trên div mẹ thành display: flex;

2 - Đặt CSS trên div cha thành flex-direction: column;
Lưu ý rằng điều này sẽ làm cho tất cả nội dung bên trong div đó xếp từ trên xuống dưới. Điều này sẽ hoạt động tốt nhất nếu div cha chỉ chứa con và không chứa gì khác.

3 - Đặt CSS trên div cha thành justify-content: center;

Đây là một ví dụ về CSS sẽ trông như thế nào:

.parentDivClass {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

15
Vikas Gupta 2019-09-25 19:20.

Bạn có thể tận dụng

display: flex; align-items: center; justify-content: center;

trên thành phần mẹ của bạn

https://repl.it/repls/TomatoImaginaryInitialization

8
Polar 2018-11-13 16:27.

diplay: flex;đối với thùng chứa của nó và margin:auto;đối với nó là mục hoạt động hoàn hảo.

LƯU Ý: Bạn phải thiết lập widthheightđể xem hiệu ứng.

#container{
  width: 100%; /*width needs to be setup*/
  height: 150px; /*height needs to be setup*/
  display: flex;
}

.item{
  margin: auto; /*These will make the item in center*/
  background-color: #CCC;
}
<div id="container">
   <div class="item">CENTER</div>
</div>

5
Aksana Tolstoguzova 2017-04-21 08:52.

margin: auto hoạt động "hoàn hảo" với flexbox tức là nó cho phép căn giữa mục theo chiều dọc và chiều ngang.

html, body {
  height: 100%;
  max-height: 100%;
}

.flex-container {
  display: flex;
    
  height: 100%;
  background-color: green;
}

.container {
  display: flex;
  margin: auto;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS</title>
</head>
<body>
  <div class="flex-container">
    <div class="container">
      <div class="row">
        <span class="flex-item">1</span>
      </div>
      <div class="row">
        <span class="flex-item">2</span>
      </div>
      <div class="row">
        <span class="flex-item">3</span>
      </div>
     <div class="row">
        <span class="flex-item">4</span>
    </div>
  </div>  
</div>
</body>
</html>

3
Leo 2017-03-05 07:47.

Nếu bạn cần căn giữa văn bản trong một liên kết, điều này sẽ thực hiện thủ thuật:

div {
  display: flex;

  width: 200px;
  height: 80px;
  background-color: yellow;
}

a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* only important for multiple lines */

  padding: 0 20px;
  background-color: silver;
  border: 2px solid blue;
}
<div>
  <a href="#">text</a>
  <a href="#">text with two lines</a>
</div>

2
Wilson 2019-12-07 03:35.

KẾT QUẢ:

HTML:

<div class="flex-container">
  <div class="rows">

    <div class="row">
      <span class="flex-item">1</span>
    </div>
    <div class="row">
      <span class="flex-item">2</span>
    </div>
    <div class="row">
      <span class="flex-item">3</span>
    </div>
    <div class="row">
      <span class="flex-item">4</span>
    </div>

  </div>  
</div>

CSS:

html, body {
  height: 100%;  
}

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.rows {
  display: flex;
  flex-direction: column;
}

trong đó flex-containerdiv được sử dụng để căn giữa theo chiều dọc và chiều ngang rowsdiv của bạn và rowsdiv được sử dụng để nhóm các "mục" của bạn và sắp xếp chúng trong một cột dựa trên.

0
Carpiee 2020-03-23 05:37.

Hy vọng điều này sẽ giúp ích.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

BoJack Horseman vẫn gan ruột và gan dạ hơn bao giờ hết trong phần 3

BoJack Horseman vẫn gan ruột và gan dạ hơn bao giờ hết trong phần 3

BoJack Horseman (Ảnh: Netflix) BoJack Horseman bắt đầu mùa thứ ba với sự xuất hiện của nhân vật tiêu biểu, người vẫn đang theo đuổi những lời khen ngợi từ giới phê bình trong một nỗ lực tuyệt vọng để tìm ra ý nghĩa trong cuộc sống của mình. Mùa thứ hai về số phận bi kịch của Raphael Bob-Waksberg dày đặc những trò đùa cũng như tuyệt vọng.

Xem cách tính năng lái tự động cập nhật của Tesla bùng phát như thế nào khi bạn bỏ qua các cảnh báo của nó

Xem cách tính năng lái tự động cập nhật của Tesla bùng phát như thế nào khi bạn bỏ qua các cảnh báo của nó

Bản nâng cấp Phiên bản 8.0 gần đây của Tesla đối với hệ thống Lái xe tự động được thiết kế để cải thiện hệ thống và mối quan hệ của nó với người lái.

UnREAL, Chương trình Truyền hình Về Truyền hình Thực tế Chúng tôi Không biết Chúng tôi Cần

UnREAL, Chương trình Truyền hình Về Truyền hình Thực tế Chúng tôi Không biết Chúng tôi Cần

Chắc chắn khi con cái chúng ta xem lại các chương trình chúng ta đã xem vào khoảng năm 2015, chúng sẽ thấy UnREAL, một chương trình truyền hình mới chiếu vào tối Thứ Hai của Lifetime — bạn sẽ thấy đúng lúc, sẽ phát sóng ngay sau khi The Bachelor kết thúc — như một chương trình không thể được thực hiện vào bất kỳ thời điểm nào khác trong lịch sử truyền hình, nhưng một chương trình cảm thấy cần thiết để xem bây giờ. UnREAL có sự tham gia của Shiri Appleby trong vai Rachel, một nhà sản xuất truyền hình cho một chương trình về cơ bản là The Bachelor, mặc dù trong thế giới này, nó được gọi là Vĩnh viễn.

Sau tất cả, Josh Trank sẽ không đạo diễn bộ phim tuyển tập Star Wars thứ hai

Sau tất cả, Josh Trank sẽ không đạo diễn bộ phim tuyển tập Star Wars thứ hai

Thông báo chính thức đến trực tiếp từ trang web của Star Wars: Fantastic Four, đạo diễn Josh Trank, một người bí ẩn không xuất hiện tại đại hội Star Wars Celebration gần đây, sẽ không chỉ đạo phần hai Star Wars Anthology. Đây là tuyên bố được đăng ngày hôm qua: Tất cả thực sự là ngôn ngữ rất lịch sự, nhưng một bài báo của Hollywood Reporter cho thấy tất cả đều không tốt ở hậu trường, gọi sự ra đi là "một vụ sa thải" một phần dựa trên "hành vi bất thường" của Trank trong khi quay Fantastic Four: The Bài báo trích dẫn các nguồn gọi là Trank “đôi khi thiếu quyết đoán và thiếu sáng tạo,” và lưu ý rằng Fantastic Four, khởi chiếu vào ngày 7 tháng 8, đã được khởi động lại vào cuối tháng 4.

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

McCain, người đang làm việc cho một album mới, lần đầu tiên bước vào vòng kết nối vào tối thứ Sáu ở Nashville

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Tôi viết như thế nào

Tôi viết như thế nào

Đối với tôi, mọi thứ là về dòng đầu tiên đó và nó sẽ đưa bạn đến đâu. Một số nhà văn bị điều khiển bởi cốt truyện, sự sắp xếp tinh tế của các quân cờ, trong khi những người khác bị lôi cuốn bởi một nhân vật và khả năng thực hiện một cuộc hành trình với một người bạn hư cấu mới.

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Language