Flexbox: จัดกึ่งกลางในแนวนอนและแนวตั้ง

วิธีจัดกึ่งกลาง div ในแนวนอนและแนวตั้งภายในคอนเทนเนอร์โดยใช้ flexbox ในตัวอย่างด้านล่างฉันต้องการให้แต่ละตัวเลขด้านล่างซึ่งกันและกัน (เป็นแถว) ซึ่งอยู่กึ่งกลางแนวนอน

.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

ฉันคิดว่าคุณต้องการบางสิ่งดังต่อไปนี้

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>

ดูตัวอย่างได้ที่: http://jsfiddle.net/audetwebdesign/tFscL/

.flex-itemองค์ประกอบของคุณควรอยู่ในระดับบล็อก ( divแทนspan) หากคุณต้องการให้ความสูงและการเสริมด้านบน / ล่างทำงานได้อย่างถูกต้อง

นอกจากนี้ในการ.rowตั้งค่าความกว้างในการแทนauto100%

.flex-containerคุณสมบัติของคุณดี

หากคุณต้องการ.rowให้การจัดกึ่งกลางแนวตั้งในพอร์ตมุมมองกำหนดความสูง 100% ให้กับhtmlและbodyและยังไม่มีศูนย์bodyระยะขอบ

โปรดทราบว่า.flex-containerต้องการความสูงเพื่อดูเอฟเฟกต์การจัดตำแหน่งแนวตั้งมิฉะนั้นคอนเทนเนอร์จะคำนวณความสูงขั้นต่ำที่จำเป็นในการใส่เนื้อหาซึ่งน้อยกว่าความสูงพอร์ตมุมมองในตัวอย่างนี้

เชิงอรรถ: , , คุณสมบัติจะได้ทำการออกแบบนี้ง่ายต่อการใช้ ฉันคิดว่าไม่จำเป็นต้องใช้คอนเทนเนอร์ถ้าคุณต้องการเพิ่มการจัดแต่งทรงผมรอบ ๆ องค์ประกอบ (ภาพพื้นหลังเส้นขอบและอื่น ๆ )
flex-flowflex-directionflex-wrap.row

ทรัพยากรที่มีประโยชน์คือ: http://demo.agektmr.com/flexbox/

วิธีการจัดองค์ประกอบองค์ประกอบในแนวตั้งและแนวนอนใน Flexbox

ด้านล่างนี้เป็นคำตอบทั่วไปสองข้อ

หนึ่งรายการสำหรับรายการเฟล็กซ์แนวตั้ง ( flex-direction: column) และอีกรายการสำหรับรายการเฟล็กซ์ที่จัดแนวนอน ( flex-direction: row)

ในทั้งสองกรณีความสูงของ div ที่อยู่กึ่งกลางสามารถแปรผันไม่ได้กำหนดไม่ทราบอะไรก็ตาม ความสูงของตัวหารที่อยู่กึ่งกลางนั้นไม่สำคัญ

นี่คือ HTML สำหรับทั้งสอง:

<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 (ไม่รวมสไตล์การตกแต่ง)

เมื่อไอเท็มเฟล็กถูกเรียงซ้อนกันในแนวตั้ง:

#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 */
}

การสาธิต

เมื่อไอเท็มเฟล็กถูกเรียงซ้อนในแนวนอน:

ปรับflex-directionกฎจากรหัสด้านบน

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

การสาธิต

การจัดศูนย์กลางเนื้อหาของรายการที่ยืดหยุ่น

ขอบเขตของบริบทการจัดรูปแบบเฟล็กซ์ถูก จำกัด ไว้ที่ความสัมพันธ์พาเรนต์ - ลูก ลูกหลานของภาชนะบรรจุแบบยืดหยุ่นซึ่งอยู่นอกเหนือจากเด็กจะไม่เข้าร่วมในรูปแบบดิ้นและจะไม่สนใจคุณสมบัติยืดหยุ่น โดยพื้นฐานแล้วคุณสมบัติดัดงอจะไม่สามารถสืบทอดได้นอกเหนือจากเด็ก

ดังนั้นคุณจะต้องใช้display: flexหรือdisplay: inline-flexองค์ประกอบหลักเพื่อใช้คุณสมบัติยืดหยุ่นกับเด็ก

เพื่อจัดข้อความกึ่งกลางแนวตั้งและ / หรือแนวนอนหรือเนื้อหาอื่น ๆ ที่อยู่ในรายการเฟล็กซ์ให้ทำรายการเป็นคอนเทนเนอร์เฟล็ก (ซ้อนกัน) และทำซ้ำกฎการจัดกึ่งกลาง

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

รายละเอียดเพิ่มเติมที่นี่: วิธีจัดแนวข้อความภายใน flexbox ได้อย่างไร?

หรือคุณสามารถนำmargin: autoไปใช้กับองค์ประกอบเนื้อหาของรายการเฟล็กซ์

p { margin: auto; }

เรียนรู้เกี่ยวกับautoระยะขอบที่ยืดหยุ่นได้ที่นี่: วิธีการจัดแนวรายการแบบยืดหยุ่น (ดูกล่อง # 56)

อยู่ตรงกลางของรายการที่ยืดหยุ่น

เมื่อคอนเทนเนอร์แบบยืดหยุ่นมีหลายบรรทัด (เนื่องจากการห่อ) align-contentคุณสมบัติจะจำเป็นสำหรับการจัดตำแหน่งแกนข้าม

จากสเป็ค:

8.4 บรรจุ Flex Line: align-content คุณสมบัติ

align-contentคุณสมบัติสอดคล้องเส้นภาชนะดิ้นภายในภาชนะดิ้นเมื่อมีพื้นที่พิเศษในแกนข้ามคล้ายกับวิธีการที่justify-contentสอดคล้องแต่ละรายการภายในแกนหลัก หมายเหตุคุณสมบัตินี้ไม่มีผลกับคอนเทนเนอร์แบบยืดหยุ่นบรรทัดเดียว

รายละเอียดเพิ่มเติมที่นี่: flex-wrap ทำงานอย่างไรกับการจัดตำแหน่งด้วยตนเองจัดรายการและจัดเรียงเนื้อหา

รองรับเบราว์เซอร์

flexbox รับการสนับสนุนจากเบราว์เซอร์ที่สำคัญทั้งหมดยกเว้น IE <10 บางรุ่นเบราว์เซอร์ที่ผ่านมาเช่น Safari 8 และ IE10 ต้องคำนำหน้าของผู้ขาย หาวิธีที่รวดเร็วเพื่อเพิ่มคำนำหน้าใช้Autoprefixer รายละเอียดเพิ่มเติมในคำตอบนี้

การแก้ปัญหาการจัดกึ่งกลางสำหรับเบราว์เซอร์รุ่นเก่า

สำหรับโซลูชันการจัดกึ่งกลางทางเลือกโดยใช้ตาราง CSS และคุณสมบัติการกำหนดตำแหน่งดูคำตอบนี้: https://stackoverflow.com/a/31977476/3597276

เพิ่ม

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

ไปยังองค์ประกอบคอนเทนเนอร์ของสิ่งที่คุณต้องการให้อยู่ตรงกลาง เอกสารอ้างอิง: ปรับเนื้อหาและ จัดรายการ-

อย่าลืมใช้แอตทริบิวต์เฉพาะของเบราว์เซอร์ที่สำคัญ:

จัดเรียงรายการ: กึ่งกลาง; ->

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

ปรับเนื้อหา: ศูนย์; ->

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

คุณสามารถอ่านลิงก์ทั้งสองนี้เพื่อความเข้าใจที่ดีขึ้น: http://css-tricks.com/almanac/properties/j/justify-content/ และ http://ptb2.me/flexbox/

โชคดี.

1 - ตั้ง CSS บน parent div เป็น display: flex;

2 - ตั้ง CSS บน parent div เป็นflex-direction: column;
โปรดทราบว่าสิ่งนี้จะทำให้เนื้อหาทั้งหมดใน div นั้นเรียงจากบนลงล่าง วิธีนี้จะได้ผลดีที่สุดหาก div div บรรจุลูกและไม่มีอะไรอีก

3 - ตั้ง CSS บน parent div เป็น justify-content: center;

นี่คือตัวอย่างลักษณะของ CSS:

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

คุณสามารถใช้ประโยชน์จาก

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

ในองค์ประกอบหลักของคุณ

https://repl.it/repls/TomatoImaginaryInitialization

diplay: flex;เพราะมันเป็นภาชนะและmargin:auto;มันเป็นสินค้าที่สมบูรณ์แบบ

หมายเหตุ:คุณต้องตั้งค่าwidthและheightเพื่อดูผลกระทบ

#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>

หากคุณต้องการจัดกึ่งกลางข้อความในลิงก์สิ่งนี้จะทำเคล็ดลับ:

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: autoทำงานได้สมบูรณ์แบบด้วย flexbox มันรวมศูนย์ในแนวตั้งและแนวนอน

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>

ผลลัพธ์:

รหัส

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

โดยที่flex-containerdiv ใช้เพื่อจัดกึ่งกลางในแนวตั้งและแนวนอนของคุณrowsdiv และrowsใช้เพื่อจัดกลุ่ม "รายการ" ของคุณและสั่งซื้อในคอลัมน์ตาม

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

ใช้CSS +

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

ลองดูที่นี่