วิธีจัด `div` ให้อยู่กึ่งกลางใน CSS

 (joshwcomeau.com)
5 คะแนน โดย GN⁺ 2024-02-14 | 3 ความคิดเห็น | แชร์ทาง WhatsApp
  • การจัดกึ่งกลางใน CSS ไม่ใช่แค่ทริกเดียวอีกต่อไป แต่เป็นเรื่องของการเลือกใช้ระหว่าง Flow, Flexbox, Positioned layout, CSS Grid, text-align ตามว่าองค์ประกอบอยู่ใน flow ของเอกสาร ลอยอยู่ หรือมีหลายชิ้น
  • ถ้าต้องการวางองค์ประกอบเดี่ยวให้อยู่กึ่งกลางแนวนอน วิธีแบบ Flow layout โดยจำกัดความกว้างด้วย max-width: fit-content แล้วใช้ margin-inline: auto จะกระทบกับองค์ประกอบพี่น้องน้อยกว่า
  • Flexbox สามารถจัดลูกหนึ่งชิ้นหรือหลายชิ้นให้อยู่กึ่งกลางแนวนอน/แนวตั้งได้ด้วยแค่ justify-content: center และ align-items: center และแม้ลูกจะล้นออกมาก็ยัง overflow แบบสมมาตร
  • UI ที่ลอยอยู่ เช่น modal หรือ banner เหมาะกับการใช้ position: fixed, inset: 0, การจำกัดขนาด และ margin: auto ร่วมกัน ส่วน CSS Grid เด่นเรื่องไวยากรณ์สั้นและการ ซ้อนทับกัน
  • ตัวข้อความเองไม่ใช่การจัดเลย์เอาต์ จึงต้องใช้ text-align: center และเมื่อการรองรับ align-content ใน Flow layout กว้างขึ้น ก็อาจลดความจำเป็นในการเปลี่ยนไปใช้ Flexbox หรือ Grid แค่เพื่อจัดกึ่งกลางแนวตั้งแบบง่าย ๆ

จัดกึ่งกลางแนวนอนใน Flow layout ด้วย auto margin

  • หนึ่งในวิธีเก่าแก่คือจำกัดความกว้างขององค์ประกอบก่อน แล้วตั้ง margin ทั้งสองด้านเป็น auto
.element {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
  • องค์ประกอบใน Flow layout จะกินพื้นที่แนวนอนเต็มโดยปริยาย ดังนั้นถ้าจะวางไว้ตรงกลาง ต้อง จำกัดความกว้าง ก่อน
  • fit-content ทำให้องค์ประกอบโอบตามเนื้อหา จน width ถูกกำหนดด้วยขนาดของเนื้อหาเหมือน height
  • ถ้าใช้ max-width แทน width จะเป็นการจำกัดแค่ขนาดสูงสุด ทำให้องค์ประกอบย่อเล็กลงตามคอนเทนเนอร์ได้เมื่อพื้นที่แคบลง
  • ถ้ามีแค่ margin-left: auto พื้นที่ว่างจะถูกใส่ไว้ที่ margin ซ้าย แต่ถ้าตั้ง margin ทั้งสองด้านเป็น auto พื้นที่ว่างจะถูกแบ่งเท่ากัน ทำให้องค์ประกอบอยู่ตรงกลาง
.element {
  max-width: fit-content;
  margin-inline: auto;
}
  • margin-inline เป็นวิธีสมัยใหม่ในการตั้ง margin-left และ margin-right ให้มีค่าเท่ากัน และมีการรองรับของเบราว์เซอร์ที่ดี
  • margin-inline เป็นส่วนหนึ่งของ logical properties จึงอิงกับแกน inline ตามทิศทางการเขียน ไม่ได้อิงซ้ายขวาแบบตายตัว
    • จึงสามารถใส่ margin ด้านที่ถูกต้องได้ทั้งในภาษาที่เขียนจากซ้ายไปขวาและจากขวาไปซ้าย
  • วิธีนี้มีประโยชน์เมื่ออยาก จัดกึ่งกลางเฉพาะลูกเดี่ยว เช่น รูปภาพในบทความบล็อก โดยไม่อยากให้กระทบกับองค์ประกอบพี่น้อง

จัดกึ่งกลางลูกเดี่ยวหรือหลายลูกด้วย Flexbox

  • Flexbox เป็นโหมดเลย์เอาต์ที่เก่งเรื่องการจัดวางหลายรายการตามแกนหลัก และถูกใช้บ่อยมากสำหรับการจัดกึ่งกลาง
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
  • เมื่อใช้ justify-content: center คู่กับ align-items: center ก็สามารถวางลูกให้อยู่กึ่งกลางทั้งแนวนอนและแนวตั้งได้
  • แม้ลูกจะมีขนาดไม่พอดีกับคอนเทนเนอร์ การจัดตำแหน่งก็ยังคงอยู่ และหากล้นออกมาก็จะ overflow แบบสมมาตร
  • สามารถจัดกึ่งกลางลูกหลายชิ้นได้เช่นกัน และควบคุมทิศทางการเรียงซ้อนด้วย flex-direction
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
  • เหมาะจะใช้เป็น ตัวเลือกพื้นฐาน ที่ครอบคลุมทั้งกรณีลูกเดี่ยวและหลายลูก

จัดกึ่งกลาง UI แบบลอยด้วย Positioned layout

  • องค์ประกอบที่ต้องลอยอยู่เหนือ flow ปกติของเอกสาร เช่น modal, prompt, banner สามารถจัดการได้ด้วย Positioned layout
.element {
  position: fixed;
  inset: 0px;
  width: 12rem;
  height: 5rem;
  max-width: 100vw;
  max-height: 100dvh;
  margin: auto;
}
  • position: fixed จะตรึงองค์ประกอบไว้กับ viewport และ inset: 0px คือการตั้ง top, left, right, bottom ให้เป็น 0px ทั้งหมด
  • ถ้ามีแค่ inset: 0px องค์ประกอบจะพยายามขยายเต็ม viewport ดังนั้นจึงต้องจำกัดขนาดด้วย width, height, max-width, max-height
  • การจับคู่นี้คือการสร้างเงื่อนไขที่เป็นไปไม่ได้ขึ้นมาโดยตั้งใจ
    • องค์ประกอบไม่สามารถห่างจากทั้งซ้ายและขวา 0px พร้อมกับมีความกว้าง 12rem ได้ในเวลาเดียวกัน
    • CSS rendering engine จะให้ความสำคัญกับข้อจำกัดของ width ก่อน แล้วคลายความขัดแย้งด้วยการไปชิดด้านหนึ่งตามทิศทางภาษา
  • เมื่อใส่ margin: auto เข้าไป วิธีที่เบราว์เซอร์ใช้คลายความขัดแย้งจะเปลี่ยนไป ทำให้องค์ประกอบไปอยู่ กึ่งกลางทั้งแนวนอนและแนวตั้ง
  • เงื่อนไข 4 อย่างที่ต้องมีคือ position: fixed, inset: 0px, ความกว้างและความสูงที่ถูกจำกัด, และ margin: auto

  • จัดกึ่งกลางแค่แกนเดียว เช่น banner ด้านล่าง

    .element {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 8px;
  width: 12rem;
  max-width: calc(
    100vw - 8px * 2
  );
  margin-inline: auto;
}
    • เมื่อไม่ใส่ top: 0px เงื่อนไขที่เป็นไปไม่ได้ในแนวตั้งก็หายไป และองค์ประกอบจะถูกตรึงไว้ด้านล่าง
    • calc(100vw - 8px * 2) ใช้จำกัดความกว้างสูงสุดโดยเว้น buffer ไว้ทั้งสองด้านของ viewport
    • margin-inline: auto ยังสื่อเจตนาเรื่องการจัดกึ่งกลางแนวนอนได้ชัดเจนกว่า

  • องค์ประกอบที่ไม่รู้ขนาดล่วงหน้า

    .element {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
}
    • ถ้ายังไม่รู้ขนาดขององค์ประกอบล่วงหน้า สามารถใช้ width: fit-content และ height: fit-content เพื่อให้โอบตามเนื้อหาได้
    • อาจเพิ่มข้อจำกัดอย่าง max-width: 60vw ได้ แต่ไม่จำเป็น และองค์ประกอบจะยังอยู่ภายใน viewport

  • กึ่งกลางแบบเยื้องออกไปเล็กน้อยโดยตั้งใจ

    • ถ้าปรับค่า inset ด้านหนึ่ง เช่น bottom: 48px องค์ประกอบจะขยับไปครึ่งหนึ่งของค่าที่กำหนด
    • ถ้า bottom: 48px องค์ประกอบจะเลื่อนขึ้น 24px
    • นั่นเป็นเพราะองค์ประกอบถูกแขวนไว้ตรงกลางภายใน กล่องเสมือน ระหว่างขอบบนและล่าง
    • ถ้าใช้ transform: translateY(-48px) จะสามารถย้ายองค์ประกอบขึ้นไป 48px ได้อย่างแม่นยำ
    • วิธี offset ด้วย bottom มีข้อดีคือยังเก็บพร็อพเพอร์ตี transform ไว้ใช้กับแอนิเมชันหรือเอฟเฟกต์ตอนแสดงผลภายหลังได้

จัดกึ่งกลางแบบสั้น ๆ และซ้อนทับกันด้วย CSS Grid

  • โค้ดจัดกึ่งกลางที่สั้นที่สุดใน CSS Grid คือการใช้ display: grid คู่กับ place-content: center
.container {
  display: grid;
  place-content: center;
}

  • place-content เป็นรูปย่อของ justify-content และ align-content โดยกำหนดค่าเดียวกันให้ทั้งแถวและคอลัมน์

  • การตั้งค่านี้จะสร้างเซลล์ Grid 1×1 ไว้ตรงกลางของคอนเทนเนอร์แม่

  • ความต่างจาก Flexbox

    • แม้จะดูคล้าย Flexbox แต่ CSS Grid ใช้อัลกอริทึมเลย์เอาต์ที่ต่างกันโดยสิ้นเชิง
    • หากกำหนด width: 50% และ height: 50% ให้ลูก ความต่างจะเห็นชัด
    • ใน Flexbox ค่าเปอร์เซ็นต์จะคำนวณจาก .container แม่
    • ใน CSS Grid ค่าเปอร์เซ็นต์จะคำนวณจาก เซลล์ Grid
    • ถ้าไม่ได้กำหนด grid-template-columns หรือ grid-template-rows ขนาดของ Grid track จะคำนวณจากเนื้อหา จึงอาจทำให้องค์ประกอบเล็กกว่าที่คาดไว้
    • ในกรณีแบบนี้อาจต้องเพิ่ม CSS เพื่อแก้ Grid แต่ถ้าต้องการแค่จัดกึ่งกลางธรรมดา Flexbox อาจง่ายกว่า

  • ซ้อนหลายองค์ประกอบไว้ตำแหน่งเดียวกัน

    .container {
  display: grid;
  place-content: center;
}

.element {
  grid-row: 1;
  grid-column: 1;
}
    • CSS Grid สามารถวางลูกหลายตัวไว้ในเซลล์เดียวกันได้
    • ถ้ากำหนด grid-row: 1 และ grid-column: 1 ให้ .element ทุกตัว องค์ประกอบจะใช้พื้นที่ Grid เดียวกันและซ้อนกันหน้า-หลัง
    • ใช้งานได้แม้ลูกแต่ละตัวจะมีขนาดต่างกัน
    .container {
  display: grid;
  place-content: center;
  place-items: center;
}

.element {
  grid-row: 1;
  grid-column: 1;
}
    • ถ้าต้องการซ้อนลูกที่มีขนาดต่างกันให้อยู่กึ่งกลาง ต้องเพิ่ม place-items: center ด้วย
    • place-items เป็นรูปย่อของ justify-items และ align-items และใช้ควบคุมการจัดวางของรูปภาพภายในเซลล์ Grid
    • ถ้าไม่มีพร็อพเพอร์ตีนี้ แม้ตัวเซลล์ Grid จะอยู่ตรงกลาง แต่รูปภาพภายในเซลล์จะกองอยู่มุมซ้ายบน
    • หากอยากศึกษา CSS Grid เพิ่มเติม ดูได้ที่ An Interactive Guide to CSS Grid

ข้อความต้องจัดด้วย text-align แยกต่างหาก

  • ข้อความใน CSS ต้องจัดการแยกต่างหาก เพราะเทคนิคเลย์เอาต์อย่าง Flexbox ไม่ได้จัดแนวตัวอักษรทีละตัว
  • ถ้าใช้ Flexbox จัดย่อหน้าให้อยู่กึ่งกลาง บล็อกของย่อหน้า จะมาอยู่กลาง แต่ตัวอักษรในย่อหน้ายังชิดซ้ายอยู่
  • ถ้าต้องการจัดข้อความให้อยู่กึ่งกลางจริง ๆ ต้องใช้ text-align: center
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

อนาคตของ Flow layout: align-content

  • แม้ Flow layout จะจัดกึ่งกลางแนวนอนได้ด้วย auto margin แต่การจัดกึ่งกลางแนวตั้งที่ผ่านมาต้องพึ่งโหมดเลย์เอาต์อื่นอย่าง Flexbox หรือ Grid
  • ณ ต้นปี 2024 ผู้พัฒนาเบราว์เซอร์กำลังทยอยทำ align-content สำหรับ Flow layout
  • พฤติกรรมใหม่นี้ใช้ควบคุม การจัดวางตามแกน block ของเนื้อหา และในเวลานั้นใช้งานได้เฉพาะหลังแฟลกใน Chrome Canary และใน Safari Technical Preview
  • เดโมตัวอย่างไม่ได้เป็นพฤติกรรม Flow layout จริง แต่เป็นการจำลองด้วย Flexbox หลังจากตรวจสอบพฤติกรรมใน Chrome Canary และ Safari TP แล้ว
  • ฟีเจอร์นี้ไม่ได้สร้าง UI แบบใหม่ แต่ช่วยลดความจำเป็นในการสลับไปใช้โหมดเลย์เอาต์อื่นเพียงเพื่อจัดกึ่งกลางแบบง่าย ๆ

เกณฑ์การเลือกใช้ตามสถานการณ์

  • หากต้องการจัดองค์ประกอบเดี่ยวให้อยู่กึ่งกลางแนวนอนโดยไม่กระทบกับองค์ประกอบพี่น้อง ให้ใช้กลยุทธ์ Flow layout auto margin
  • UI แบบลอยอย่าง modal หรือ banner ควรจัดกึ่งกลางด้วย Positioned layout และ auto margin
  • ถ้าต้องการซ้อนหลายองค์ประกอบไว้ตำแหน่งเดียวกันและให้อยู่กึ่งกลาง CSS Grid เหมาะที่สุด
  • หากต้องการจัดข้อความให้อยู่กึ่งกลาง ให้ใช้ text-align และสามารถใช้ร่วมกับวิธีจัดกึ่งกลางอื่นได้
  • ในสถานการณ์ส่วนใหญ่ที่เหลือ Flexbox คือทางเลือกที่อเนกประสงค์ที่สุด
    • ใช้ได้ทั้งกับลูกเดี่ยวและหลายลูก
    • จัดกึ่งกลางได้ทั้งแนวนอนและแนวตั้ง
    • ใช้ได้ไม่ว่าลูกจะอยู่ภายในคอนเทนเนอร์พอดีหรือล้นออกมา

บทความที่เกี่ยวข้อง

3 ความคิดเห็น

 
v08zbv8fvlkjasdflkj 2024-02-15

พอนึกดูแล้ว อยู่ ๆ ก็รู้สึกขัดตาเหมือนกันว่า GeekNews เองก็ยังไม่ได้จัดบทความให้อยู่กึ่งกลาง ฮือ 555
 
joyfui 2024-02-14

ผมใช้ place-items: center; บ่อยอยู่แล้ว แต่ก็มีอีกหลายวิธีเหมือนกันนะ
 
GN⁺ 2024-02-14
ความคิดเห็นจาก Hacker News

  • ในเมื่อคอมเมนต์อื่น ๆ กำลังวิจารณ์ตัวคอมเมนต์กันอยู่ ขอร่วมวงด้วยแล้วกัน: ผมมองว่า มีมการจัดกึ่งกลางใน CSS ส่วนใหญ่หมายถึง “วิธีวางองค์ประกอบหนึ่งให้อยู่ตรงกลางพอดีของอีกองค์ประกอบหนึ่ง”
    ในแง่การ implement จะบอกว่าการจัดกึ่งกลางยากและอาจมีได้หลายความหมายก็ถูก แต่สำหรับคนรุ่น GeoCities หรือ AngelFire มันยากจะยอมรับ เพราะแม้แต่ HTML ในยุค 90 ก็ยังใส่ hello ไว้ตรงกลางพอดีของกล่องสีเหลือง 600x600 ได้โดยไม่มีปัญหา
    เครื่องมือใหม่ที่บอกว่าดีกว่ากลับทำงานมาตรฐานที่เคยทำได้อยู่แล้วไม่ได้ จึงน่าหงุดหงิด และนั่นทำให้หลายคนยังใช้ table layout ต่อไปจนถึงปลายยุค 2000 ผมชอบ CSS นะ แต่นี่อาจเป็นอาการ Stockholm syndrome รูปแบบหนึ่งก็ได้
    แปลกใจที่ valign ยังทำงานได้แม้ไม่มีใน Chromium และไม่แน่ใจว่านี่เป็นการเปลี่ยนแปลงล่าสุดหรือเปล่า

    • ตามที่พูดเป๊ะ ๆ คือการใส่ hello ไว้ตรงกลางพอดีของกล่องสีเหลือง 600x600 นั้นทำได้ตั้งแต่ CSS เวอร์ชันแรกแล้ว ตัวอย่างเช่น attribute valign ของ HTML สอดคล้องกับ CSS property vertical-align ของกล่อง inline, inline-block, table-cell
      แต่จากประสบการณ์ คนจำนวนไม่น้อยที่พูดแบบโรแมนติกว่าใช้ table อย่างเดียวก็พอ หรือบ่นว่า CSS มีข้อจำกัดและสับสน จริง ๆ แล้วไม่ได้พยายามเรียนรู้มากนักว่า CSS ทำงานอย่างไร อย่างน้อยผู้เขียนก็ตระหนักถึงจุดนั้น
    • ใน Firefox ก็ทำงานได้แม้ไม่มี attribute "valign" เช่นกัน แต่เวลาใช้ table โดยไม่มี fixed layout ผมเห็นความต่างเล็ก ๆ น้อย ๆ ระหว่างเบราว์เซอร์หลัก 3 ตัวมาโดยตลอด ดังนั้นโดยทั่วไปผมคงไม่พึ่งพา พฤติกรรม auto layout

  • เป็นบทความที่ดี และปฏิกิริยาที่นี่ค่อนข้างน่าประหลาดใจเมื่อเทียบกับกลุ่มผู้อ่านที่ในนามเป็นสายเทคนิค การจัดวางหน้าและการกำหนดรูปแบบแบบอัตโนมัติ นั้นยากจริง ๆ และถึงขั้นเป็นหัวข้อวิทยานิพนธ์ปริญญาเอกได้เลย[1]
    การคาดหวังว่าจะ abstraction ความซับซ้อนนั้นให้เหลือคำง่าย ๆ อย่าง “ทำให้เป็นไปตามที่ฉันตั้งใจ” ไม่ใช่เรื่องสมจริง
    ถ้าดูเว็บไซต์ของ Gwern Branwen[2] จะเห็นว่าแทบจะเป็นงานศิลปะ แต่แก่นสำคัญคือกำหนดรูปลักษณ์ที่ต้องการก่อน แล้วจำกัดงานเขียนให้สามารถแสดงออกภายในสไตล์นั้นได้
    ผมติดตามเรื่องเลย์เอาต์เว็บเพจมาตั้งแต่เข้าร่วมสตาร์ตอัป “นิตยสารกอล์ฟแห่งแรกบนเว็บ”[3] ในปี 1995 และได้เข้าใจว่า web content ที่ดูดีในสภาพแวดล้อมเอาต์พุตหลากหลายนั้นยากแค่ไหนจาก Zen Garden และ mailing list/เว็บไซต์ A List Apart[4]
    การย้าย semantic content ไปยังหน้าจอ กระดาษ หรือระนาบจำกัด เป็น mapping หรือ projection จากพื้นที่ต้นทางไปยังชุดกฎของพื้นที่ปลายทาง และกฎเหล่านั้นรวมทั้งข้อจำกัดทางกายภาพ ข้อจำกัดของซอฟต์แวร์เบราว์เซอร์ และพฤติกรรมเฉพาะตัวของแต่ละเบราว์เซอร์
    ดังนั้น CSS จึงดูเหมือนเละเทะสำหรับคนที่ “อยากสร้างเว็บเพจตั้งแต่ต้น” แต่จริง ๆ แล้วมันใกล้เคียงกับการมีทางเลือกมากเกินไป มากกว่าจะเป็นข้อจำกัดที่ขัดขวางสิ่งที่ทำได้
    [1] https://scholar.google.com/scholar?hl=en&as_sdt=0%2C5&q=thes...
    [2] https://gwern.net/
    [3] ชื่อ Golfweb และสุดท้ายดูเหมือนจะกลายเป็นส่วนหนึ่งของ CBS Sports
    [4] https://www.alistapart.com

    • ประสบการณ์ด้านเลย์เอาต์เว็บของผมเริ่มปี 1998 จึงช้ากว่าประมาณ 3 ปี แต่จากประสบการณ์ที่เกี่ยวข้องทั้งหมด ผมยังไม่เห็นอะไรยอดเยี่ยมเท่าเอกสาร Every Layout[1] ขอแนะนำอย่างยิ่ง
      [1] https://every-layout.dev/rudiments/boxes/
    • ปัญหาของ CSS แทบทั้งหมดคือ ความซับซ้อนที่สร้างขึ้นเอง จริงอยู่ที่เลย์เอาต์เป็นเรื่องยาก แต่ก็อดสงสัยไม่ได้ว่าทำไมถึงตั้งเป้าไปที่โมเดลแบบปัจจุบันจนทำให้ยากขึ้น
      โดยเฉพาะอย่างยิ่ง มันมุ่งไปสู่โมเดลใหญ่หนึ่งเดียวที่ใช้ได้กับทุกหน้า และมีเป้าหมายแบบซิซีฟัสที่จะคำนวณ auto layout ใหม่ทุกครั้งในแต่ละหน้า พอรวมกับเป้าหมายที่จะรองรับทุกขนาดหน้าต่างด้วยแล้ว ก็ไม่เข้าใจว่าทำไมถึงคิดว่าสิ่งนี้เป็นไปได้
    • อยากเห็น CSS art เพิ่ม เลยไม่อาจไม่แปะลิงก์นี้ได้
      https://css-art.com/the-girl-with-a-p-e-a-r-l-css-earring/
      ไม่รู้เหมือนกันว่ามี div ที่ถูกจัดกึ่งกลางอยู่กี่ตัว
    • ช่วงไม่กี่วันที่ผ่านมา ผมลองยัด flow-based layout และ pagination เข้าไปใน ระบบเลย์เอาต์ที่อิง Flexbox แบบฝืน ๆ และก็ยืนยันได้ว่าเลย์เอาต์กับการจัดรูปแบบนั้นยากจริง
      โดยเฉพาะในตารางที่มีข้อความและวัตถุขนาดต่างกันในแต่ละคอลัมน์ การตัดสินใจว่าจะย้ายองค์ประกอบไปหน้าถัดไปเมื่อไรและอย่างไร เป็นงานยากในการเลือก heuristic ที่ดี
    • ผมไม่รู้ว่าจะแยกแยะได้อย่างไรว่านี่เป็นปัญหาที่สร้างขึ้นเอง หรือเป็นปัญหาวิจัยที่ยากโดยเนื้อแท้ ก่อนเข้ามาทำเว็บ ผมไม่เคยคิดว่า “เลย์เอาต์เป็นเรื่องยาก” และตอนนั้นก็มีหน้าต่างที่เลื่อนได้และปรับขนาดได้อยู่แล้ว
      ใน custom appkit, คอนโทรล GTK และ toolkit ที่ใช้ Lua ภายในซึ่งไม่ได้เผยแพร่ การจัดกึ่งกลาง content หรือการขึ้นบรรทัด/จัดแนวองค์ประกอบก็ไม่ใช่เรื่องใหญ่อะไร เลยสงสัยว่าในเว็บเราพลาดอะไรไปกันแน่
      คำว่า “แค่มีตัวเลือกเยอะเท่านั้น” ฟังดูคล้ายกับ TMTOWTDI ที่ถูกฝังไปนานแล้วด้วย

  • เป็นบทความยอดเยี่ยม และองค์ประกอบแบบ interactive ก็ดีเป็นพิเศษ สิ่งที่ช่วยให้ผมเข้าใจการกำหนดตำแหน่งและการจัดกึ่งกลางใน CSS เมื่อไม่กี่ปีก่อนอย่างมาก คือการอ่านเรื่อง box model
    เมื่อเข้าใจ box model แล้ว จะช่วยให้ตัดสิน flow ภายใน DOM ได้ และ CSS properties display กับ position ก็เป็นพื้นฐานในการเรียนรู้การกำหนดตำแหน่งเช่นกัน เอกสารของ MDN ทำไว้ดี
    https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...
    https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...

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

    • ทั้งเห็นด้วยและไม่เห็นด้วย กลุ่มมนุษย์ขนาดใหญ่โดยธรรมชาติก็เคลื่อนตัวช้าและวุ่นวายแบบนี้อยู่แล้ว ใกล้เคียงกับการต้อนแมว
      เว็บและเทคโนโลยีของมันโดยรวมก็ไม่ได้ชัดเจนว่าจะมุ่งหน้าไปทางไหน จึงเลี่ยงไม่ได้ที่จะเกิดการทดลองที่ล้มเหลวและความไม่สอดคล้องกันมากมาย ขอบเขตมันกว้างกว่าโครงการวิศวกรรมที่วางแผนมาอย่างดี มีเป้าหมายและเส้นทางชัดเจนมาก
    • ผมมองว่าที่คำถามเรื่องการจัดกึ่งกลางโผล่มาบ่อย เป็นเพราะมันเป็นคำถามแรก ๆ ที่เป็นธรรมชาติมากสำหรับคนที่กำลังเรียน
      สิ่งที่คนที่อยากทำหน้าเว็บให้ได้หน้าตาตามต้องการมักเรียนก่อน คือขนาดตัวอักษร สี สีพื้นหลัง และการจัดแนว และถ้าตัดเรื่องการจัดแนวออกไป อย่างอื่นก็แทบจะตรงกันแบบ 1:1 กับวิธีก่อนยุค CSS
      ก่อนมี CSS ถ้าอยากวางคอนเทนต์ไว้ตรงกลาง ก็แค่ใส่ไว้ในแท็ก ไม่ว่าจะเป็นข้อความ, div, ตาราง, ปุ่ม หรือวัตถุ HTML แบบไหนก็ไม่สำคัญ หลายคนคาดหวังว่า CSS จะทำงานเหมือนอดีต โดยไม่ต้องแยกระหว่างอ็อบเจ็กต์อินไลน์กับบล็อก แต่เมื่อ CSS ไม่ตรงกับอคติตั้งต้นนั้น คำถามแบบนี้จึงเกิดขึ้น

  • บทความนี้ดีมากจริง ๆ โดยเฉพาะวิธีโต้ตอบที่ยอดเยี่ยมมาก ยังมีเครื่องมือหนึ่งที่ให้ผลลัพธ์ตามต้องการแทบทุกครั้งมาตั้งนานแล้วด้วย
    http://howtocenterincss.com

  • CSS ใช้เวลาหลายสิบปีกว่าจะเสนอวิธีแก้ที่ใช้งานได้พอ ๆ กับตารางที่วางคอนเทนต์ไว้ตรงกลาง แต่ระหว่างนั้น การใช้ตารางทำเลย์เอาต์ กลับถูกตำหนิ

    • ตาราง HTML ไม่ตัดบรรทัดได้ดีบนหน้าจอมือถือ ถ้าทำเลย์เอาต์ด้วยตาราง ก็มีโอกาสสูงที่จะเกิดแถบเลื่อนแนวนอน และอาจต้องเขียนใหม่เพื่อรองรับมือถือ ดังนั้นถ้าไม่ใช่ตารางข้อมูล เฟรมเวิร์ก CSS มักปลอดภัยกว่า
      ตาราง HTML จำเป็นต้องมีการจัดการอย่างน้อยเช่น `` เพื่อการเข้าถึง
      https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/A...
      เอกสาร CSS Grid Layout ก็ควรค่าแก่การดู
      https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
      Firefox DevTools > INTRODUCTION TO CSS GRID LAYOUT: https://mozilladevelopers.github.io/playground/css-grid/
      CSS Grid Garden: https://cssgridgarden.com/
      MDN > "Relationship of grid layout to other layout methods": https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
      MDN: "Box alignment in grid layout": https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
    • การนำข้อมูลที่ไม่ใช่ตารางมาแสดงด้วยตารางนั้น ไม่เป็นเชิงความหมายและยังทำลายการเข้าถึง
      การพัฒนาเว็บมีองค์ประกอบมากกว่าตำแหน่งที่คอนเทนต์ถูกวางไว้บนหน้า และนั่นคือเหตุผลที่การพัฒนาเว็บที่ดีเป็นเรื่องยาก
    • ใช่เลย จำตอนนั้นได้ ข้อดีของ div กับ CSS คือภาพลักษณ์แบบฮิปสเตอร์ ส่วนข้อเสียคือ ซุป DIV
      ตอนนั้น CSS ไม่เหมาะกับสิ่งที่ผู้คนพยายามทำอย่างเหลือเชื่อ ผมคิดว่าเพราะมันถูกออกแบบมาสำหรับการจัดรูปแบบเอกสาร ไม่ใช่สำหรับเว็บแอปหรือเลย์เอาต์หน้าจอ
      ในทางกลับกัน ข้อดีของ table คือมันใช้งานได้จริง
    • ตอนนั้นรู้สึกว่า วิธีใช้ตาราง เป็นวิธีที่แข็งแรงที่สุด

  • เหมือนหลายคนที่นี่ ผมมองว่า CSS เป็นหายนะโดยสมบูรณ์ ปัญหาหลักคือคำสั่งสไตล์คอย เขียนทับ กันไม่หยุด หรือไม่ก็ล้มเหลวเงียบ ๆ โดยไม่มีผลอะไรเลย

  • ชอบที่ข้อความแจ้งคุกกี้ในตัวอย่างหนึ่งซื่อตรงอย่างโหดร้าย
    “เราให้ความสำคัญกับข้อมูลส่วนบุคคลของคุณ เราใช้คุกกี้ที่ขายข้อมูลนี้ให้ผู้ลงโฆษณาเพื่อยกระดับประสบการณ์การท่องเว็บของคุณ สิ่งนี้มีคุณค่ามาก”

  • สิ่งที่เรียนรู้จากประวัติศาสตร์การใช้ตารางทำเลย์เอาต์นั้นน่าสนใจ ตารางมีเส้นขอบ แพดดิ้ง และเลย์เอาต์แบบอิงเซลล์ที่จัดเรียงเป็นคอลัมน์ และเมื่อขยายออกไป รอบ ๆ ตารางกับเซลล์ก็ยังต้องมีช่องว่าง นั่นคือมาร์จินด้วย
    ตารางเป็นองค์ประกอบที่ตั้งหลักในงานเลย์เอาต์มานาน และจริง ๆ แล้วมันมีภูมิปัญญาว่าองค์ประกอบทุกอย่างควร ทำงานคล้ายเซลล์ตาราง ในระดับหนึ่ง
    องค์ประกอบควรทำตาม box model ซึ่งสำหรับคนทำงานด้านตัวพิมพ์ถือว่าค่อนข้างชัดเจน แต่ขณะเดียวกัน ประเด็นที่ว่ามันควรถูกจัดเรียงเป็นคอลัมน์นั้นชัดเจนน้อยกว่า และกลายเป็นพื้นฐานของ Grid layout กับ Bootstrap
    เมื่อเจอปัญหาเลย์เอาต์แล้วแก้ด้วยตาราง จากนั้นตระหนักว่าต้องมีฟีเจอร์ใหม่ที่มีคุณสมบัติบางส่วนของตารางแต่ไม่ใช่ทั้งหมด นั่นเป็นวิวัฒนาการที่เป็นธรรมชาติ
    CSS ค้นพบเรื่องนี้แล้ว แต่ก็น่าแปลกที่บางระบบอย่างโปรแกรมประมวลผลคำกลับไม่สามารถรวมองค์ประกอบต่าง ๆ ไว้ใต้ box model ได้

  • ข้อบ่นว่า “ทำไมถึงยังยากขนาดนี้อยู่” ดูจะค่อนข้างคลาดเคลื่อน อย่างที่บทความบอกไว้ Flexbox แก้กรณีการจัดกึ่งกลางแบบง่าย ๆ ทุกแบบได้อย่างเป็นธรรมชาติ
    ถ้า Flexbox แก้ไม่ได้ นั่นก็ไม่ใช่แค่การจัดกึ่งกลางธรรมดา แต่เป็นการทำสิ่งที่ซับซ้อนกว่า และการคาดหวังให้การทำงานนั้นเรียบง่ายมาก ๆ ก็ไม่เหมาะสม

    • ในมุมของคนที่ทำมานาน ก่อนยุค Flexbox มันยากจริง และในช่วงที่ Flexbox ยังไม่ได้รับการรองรับ 100% ก็ยังต้องคอยติดตามสัดส่วนการใช้งานเบราว์เซอร์อยู่ตลอดเพื่อประเมินว่าใช้ได้หรือยัง จึงยากเช่นกัน
      ตอนนี้กลับมีวิธีมากเกินไปจนความซับซ้อนท่วมท้น หลายครั้งต้องแก้โค้ดเก่ามากกว่าสร้างใหม่ ต้องพิจารณาว่าทำไม CSS ถึงถูกเขียนด้วยวิธีนั้น edge case ไหนจะพัง แก้ได้หรือไม่ และเมื่อไม่ใช่เรื่องง่ายควรเลือกทางออกใดจากหลายวิธี
      แค่กวาดตาดูบทความก็ยังไม่ค่อยเป็นธรรมชาติ แม้ใน Flexbox การตั้งค่าแนวนอนคือ justify-content ส่วนแนวตั้งคือ align-items แต่ชื่อพร็อพเพอร์ตีของ CSS มีมากเกินไปและดูตั้งขึ้นเองจนจำไม่ค่อยได้แล้ว
      สุดท้ายความต่างคือ เราสร้างทางออกที่ซับซ้อนจาก building block ที่เรียบง่าย เป็นธรรมชาติ และเชื่อถือได้ หรือสร้างทางออกที่ซับซ้อนจาก building block ที่ซับซ้อน ซึ่งทับซ้อนกันบางส่วนและต้องค้นหาอยู่เรื่อย ๆ
      Go หรือ Python ใกล้เคียงแบบแรก ส่วน CSS ใกล้เคียงแบบหลัง
    • Flexbox คือสิ่งที่ผมหวังมาตลอดว่า CSS ควรจะเป็น และหลังจากที่ไม่เป็นแบบนั้นมานาน วันหนึ่งมันก็กลายเป็นแบบนั้น และเราก็สามารถเลิกซัพพอร์ตเบราว์เซอร์ที่ไม่มี Flexbox ได้ มันให้ความรู้สึกแทบจะเป็น รูปแบบสุดท้ายของ CSS
      มีเหตุผลที่ผู้คนชอบระบบกริดของ Bootstrap และ Flexbox ก็ทำทั้งหมดนั้นและมากกว่านั้นได้ทันทีในเบราว์เซอร์ แทบจะพูดเกินจริงได้ยากว่าผมชอบมันแค่ไหน
    • ครั้งหนึ่งในบางกรณีมันเคยยากพอสมควร แต่ตลอดราว 10 ปีที่ผ่านมา นี่เป็นปัญหาที่ถูกแก้ไปแล้ว ยังมีคนพูดเหมือนการจัด div ให้อยู่กึ่งกลางใน CSS เป็นอะไรที่อยู่กึ่งกลางระหว่างเล่นแร่แปรธาตุกับวิทยาศาสตร์จรวด
      มันเผยให้เห็นว่าพวกเขาไม่ได้ตามความเปลี่ยนแปลงของ CSS เท่ากับส่วนอื่น ๆ ของการพัฒนาเว็บ แต่ก็ยังพูดฟันธงแบบนั้นได้อย่างสบายใจ
    • อีกอย่าง Flexbox ก็ได้รับการรองรับอย่างแพร่หลายมานานกว่า 10 ปีแล้ว กระแสคอมเมนต์ตรงนี้น่าสนใจทีเดียว
    • เห็นด้วยจริง ๆ เวลาเจอ Flexbox แล้วงง การถอยออกมาหนึ่งก้าวแล้วค่อย ๆ แก้ทีละขั้นช่วยได้มาก
      ไล่จากด้านนอกเข้าไปด้านใน จากองค์ประกอบแม่ไปสู่องค์ประกอบลูก จะทำให้ง่ายขึ้นมาก ถึงจะต้องใช้ทักษะอยู่บ้าง แต่โดยพื้นฐานแล้วมันใกล้เคียงกับ พีชคณิตแบบยืดหยุ่น