Flexbox: trung tâm theo chiều ngang và chiều dọc

Cách căn giữa div theo chiều ngang và chiều dọc trong thùng chứa bằng flexbox. Trong ví dụ dưới đây, tôi muốn mỗi số nằm 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

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 bản demo tại: http://jsfiddle.net/audetwebdesign/tFscL/

Các .flex-itemyếu tố của bạn phải là cấp độ khối ( divthay vì span) nếu bạn muốn phần đệm chiều cao và đỉnh / đáy hoạt động chính xác.

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

.flex-containerTài sản của bạn là tốt.

Nếu bạn muốn .rowđặt chính giữa theo chiều dọc trong cổng xem, chỉ định 100% chiều cao cho htmlvà body, cũng như không có bodylề.

Lưu ý rằng .flex-containercần có chiều cao để xem hiệu ứng căn chỉnh 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 quanh 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 .rowcontainer 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 thành phần (hình nền, đường viền, v.v.).

Một tài nguyên hữu ích là: http://demo.agektmr.com/flexbox/

Cách trung tâm 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 căn chỉnh theo chiều dọc ( flex-direction: column) và một cho các mục flex được căn chỉnh theo chiều ngang ( flex-direction: row).

Trong cả hai trường hợp, chiều cao của div trung tâm 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 div trung tâm 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 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 theo chiều ngang:

Điều chỉnh flex-directionquy tắc từ 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 flex

Phạm vi của bối cảnh định dạng flex được giới hạn trong mối quan hệ cha-con. Hậu duệ của một container flex ngoài trẻ em không tham gia vào bố trí flex và sẽ bỏ qua các thuộc tính flex. Về cơ bản, tính chất flex không được thừa kế ngoài trẻ em.

Do đó, bạn sẽ luôn cần phải á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 trẻ.

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

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

Thêm chi tiết tại đây: Làm cách nào để căn chỉnh văn bản theo chiều dọc trong một flexbox?

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

p { margin: auto; }

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

Định tâm nhiều dòng vật phẩm flex

Khi một thùng chứa flex 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 có hiệu lực đối với thùng chứa flex dòng đơn.

Thêm chi tiết tại đây: Làm thế nào để flex-quấn hoạt động với align-self, align-item và align-content?

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, như Safari 8 và IE10, yêu cầu tiền tố của nhà cung cấp . Để biết cách nhanh chóng để thêm tiền tố, hãy sử dụng Autoprefixer . Thêm chi tiết trong câu trả lời này .

Giải pháp định tâm cho các trình duyệt cũ hơn

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

Thêm vào

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

đến phần tử container của bất cứ thứ gì bạn muốn làm trung tâm. Tài liệu: justify-content và align-items .

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

align-item: 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/properIES/j/justify-content/ và http://ptb2.me/flexbox/

Chúc may mắn.

1 - Đặt CSS trên div cha 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 trong dòng div đó 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 có gì khác.

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

Dưới đây là một ví dụ về giao diện của CSS:

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

Bạn có thể sử dụng

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

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

https://repl.it/repls/TomatoImaginaryInitialization

diplay: flex;cho nó container và margin:auto;cho nó hoạt động hoàn hảo.

LƯU Ý: Bạn phải thiết lập widthvà heightđể 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>

Nếu bạn cần căn giữa một 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>

margin: autohoạt động hoàn hảo với flexbox. Nó tập trung 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>

KẾT QUẢ:

MÃ

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 của 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 theo một cột dựa trên cột.

    .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;
}

Sử dụng CSS +

<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

hãy xem TẠI ĐÂY