วิธีจัด DIV ให้อยู่ตรงกลางโดยใช้ CSS [5 วิธีด่วน]

เผยแพร่แล้ว: 2024-09-17

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

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

ไม่ว่าคุณจะเพิ่งเริ่มใช้ CSS หรือต้องการทบทวนอย่างรวดเร็ว คู่มือนี้จะช่วยให้คุณเชี่ยวชาญศิลปะในการจัดองค์ประกอบให้อยู่ตรงกลางหน้าเว็บของคุณ มาเริ่มกันเลย!


สารบัญ
DIV คืออะไร และเหตุใดจึงต้องพิจารณาจัด DIV ให้อยู่ตรงกลางด้วย
วิธีจัดกึ่งกลาง DIV โดยใช้ CSS (วิธีการที่แตกต่างกัน)
บทสรุป

DIV คืออะไร และเหตุใดจึงต้องพิจารณาจัด DIV ให้อยู่ตรงกลางด้วย

div หรือการหารเป็นองค์ประกอบ HTML พื้นฐานที่ทำหน้าที่เป็นคอนเทนเนอร์เพื่อจัดกลุ่มองค์ประกอบอื่นๆ บนหน้าเว็บ

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

เหตุใดจึงต้องพิจารณาจัดตำแหน่ง Div ให้อยู่ตรงกลางด้วย

การจัดศูนย์กลาง div เป็นสิ่งสำคัญมากจากมุมมองของประสบการณ์ผู้ใช้ แต่อาจเป็นความท้าทายด้านสไตล์สำหรับนักพัฒนาเว็บ เนื่องจากสามารถปรับปรุงรูปลักษณ์และเค้าโครงของหน้าเว็บได้อย่างมาก

นี่คือเหตุผลว่าทำไมการวางศูนย์กลางจึงมีความสำคัญ:

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

วิธีจัดกึ่งกลาง DIV โดยใช้ CSS (วิธีการที่แตกต่างกัน)

การวางศูนย์กลาง div สามารถทำได้หลายวิธี ขึ้นอยู่กับว่าคุณต้องการจัดกึ่งกลางในแนวนอน แนวตั้ง หรือทั้งสองอย่าง ต่อไปนี้เป็นวิธีการง่ายๆ:

ต่อไปนี้เป็นวิธีการยอดนิยมบางส่วนในการจัดกึ่งกลาง div โดยใช้ CSS:

วิธีที่ 1: วิธีจัดกึ่งกลาง Div ด้วย Auto Margins

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

1. สิ่งที่คุณต้องรู้

หากต้องการจัดกึ่งกลาง div ในแนวนอนด้วยระยะขอบอัตโนมัติ ให้ทำตามขั้นตอนเหล่านี้:

  • 1. จำกัดความกว้าง: ขั้นแรก ตรวจสอบให้แน่ใจว่า div ของคุณไม่ได้ใช้ความกว้างเต็มของคอนเทนเนอร์ ตามค่าเริ่มต้น div จะขยายให้เต็มความกว้างทั้งหมด หากต้องการจัดกึ่งกลาง คุณต้องตั้งค่าความกว้างสูงสุด
  • 2. ใช้ Auto Margins: Auto Margins ทางซ้ายและขวาจะดัน div ไปที่กึ่งกลาง

นี่เป็นตัวอย่างง่ายๆ:

html

<div class="centered-div">This is a centered div</div>

ซีเอสเอส

.centered-div {

max-width: fit-content; /* Makes the div only as wide as its content */

margin-left: auto; /* Pushes the div to the right */

margin-right: auto; /* Pushes the div to the left, centering it */
}

2. เหตุใดจึงต้องใช้ max-width: fit-content; -

max-width: fit-content; กฎทำให้แน่ใจว่า div ใช้ความกว้างมากเท่าที่ต้องการเท่านั้น โดยขึ้นอยู่กับเนื้อหา หากคุณใช้ความกว้างคงที่ เช่น 200px div อาจล้นหากคอนเทนเนอร์แคบเกินไป fit-content ปรับขนาด div แบบไดนามิกเพื่อให้พอดีกับเนื้อหา

3. ระยะขอบอัตโนมัติทำงานอย่างไร?

ขอบอัตโนมัติทำหน้าที่เหมือนกับฮิปโปผู้หิวโหย โดยกินพื้นที่เพิ่มเติมเท่าๆ กันทั้งสองด้านเพื่อให้ div อยู่ตรงกลาง วิธีนี้จะปรับเปลี่ยนโดยอัตโนมัติสำหรับภาษาต่างๆ และเหมาะอย่างยิ่งสำหรับการจัดองค์ประกอบเดี่ยวให้อยู่ตรงกลางโดยไม่ส่งผลกระทบต่อองค์ประกอบอื่นๆ

เมื่อตั้งค่าระยะขอบทั้งสองเป็น auto ทั้งสองจะแบ่งพื้นที่เพิ่มเติมเท่าๆ กัน โดยให้ div อยู่ตรงกลาง

4. การใช้ทางลัดสมัยใหม่: margin-inline

แทนที่จะตั้ง margin-left และ margin-right แยกกัน คุณสามารถใช้คุณสมบัติ margin-inline เพื่อแนวทางที่สะอาดกว่าได้:

.centered-div {

ความกว้างสูงสุด: พอดีเนื้อหา;

ขอบอินไลน์: อัตโนมัติ; /* ตั้งค่าระยะขอบทั้งซ้ายและขวาเป็นอัตโนมัติโดยอัตโนมัติ */

-


วิธีที่ 2: วิธีจัดกึ่งกลาง DIV ด้วย Flexbox

Flexbox ทำให้ง่ายต่อการจัดวางรายการไว้ตรงกลางทั้งสองทิศทาง ต่อไปนี้คือวิธีที่คุณสามารถจัดกึ่งกลางองค์ประกอบเดียวโดยใช้ Flexbox:

.คอนเทนเนอร์ {

จอแสดงผล: ดิ้น;

ปรับเนื้อหา: กึ่งกลาง; /* จัดกึ่งกลางแนวนอน */

จัดรายการ: กึ่งกลาง; /* กึ่งกลางแนวตั้ง */

-

ในตัวอย่างนี้ . .container ได้รับการตั้งค่าให้ใช้ Flexbox คุณสมบัติ justify-content: center จัดกึ่งกลางรายการในแนวนอน ในขณะที่ align-items: center จัดกึ่งกลางรายการในแนวตั้ง

ประเด็นสำคัญบางประการที่ควรพิจารณา:

การจัดกึ่งกลางแนวนอนและแนวตั้ง: Flexbox ช่วยให้การจัดกึ่งกลางรายการทั้งแนวนอนและแนวตั้งเป็นเรื่องง่าย แม้ว่ารายการจะล้นคอนเทนเนอร์ก็ตาม

หลายรายการ : Flexbox ยังจัดการหลายรายการได้ดี คุณสามารถใช้ flex-direction: row เพื่อ ซ้อนรายการในแถวหรือ flex-direction : column สำหรับสแต็กแนวตั้ง การเพิ่ม gap สามารถปรับระยะห่างระหว่างรายการได้

วิธีนี้มีความยืดหยุ่นมากและมักใช้เพื่อจัดองค์ประกอบให้อยู่ตรงกลางในเค้าโครงต่างๆ


WPOven Dedicated Hosting

วิธีที่ 3: วิธีจัดกึ่งกลาง DIV ในวิวพอร์ต

เมื่อคุณต้องการจัดองค์ประกอบให้อยู่ตรงกลาง เช่น ป๊อปอัปหรือแบนเนอร์ ตรงกลางหน้าจอ (วิวพอร์ต) คุณสามารถใช้การวางตำแหน่ง CSS ได้ มีวิธีง่ายๆ ดังนี้:

1. การวางศูนย์กลางขั้นพื้นฐานด้วยตำแหน่งคงที่

หากต้องการจัดกึ่งกลางองค์ประกอบทั้งแนวนอนและแนวตั้ง ให้ใช้ขั้นตอนต่อไปนี้:

  • ตั้งค่าตำแหน่งเป็นคงที่:

position: fixed; ทำให้องค์ประกอบคงอยู่กับที่ในขณะที่คุณเลื่อน เหมือนเอาธาตุมาติดหน้าจอ

  • ใช้สิ่งที่ใส่เข้าไปเพื่อยึด:

inset: 0px; เป็นทางลัดสำหรับกำหนดระยะห่างขององค์ประกอบจากขอบวิวพอร์ต (บน, ขวา, ล่าง, ซ้าย) เป็น 0 พิกเซล ซึ่งจะขยายองค์ประกอบให้เต็มหน้าจอ

  • จำกัดขนาด :

– กำหนด width และ height เพื่อกำหนดขนาดขององค์ประกอบ

– ใช้ max-width และ max-height เพื่อให้แน่ใจว่าจะไม่ล้นบนหน้าจอขนาดเล็ก

  • จัดกึ่งกลางด้วยระยะขอบอัตโนมัติ : – margin: auto; จัดองค์ประกอบให้อยู่ตรงกลาง แบ่งพื้นที่ส่วนเกินรอบๆ ให้เท่าๆ กัน โดยให้อยู่ตรงกลาง

รหัสตัวอย่าง:

.องค์ประกอบ {

ตำแหน่ง: คงที่;

สิ่งที่ใส่เข้าไป: 0; /* ยึดองค์ประกอบไว้ที่ขอบทั้งหมด */

ความกว้าง: 12rem; /* กำหนดความกว้างคงที่ */

ความสูง: 5rem; /* กำหนดความสูงคงที่ */

ความกว้างสูงสุด: 100vw; /* ตรวจสอบให้แน่ใจว่าไม่ล้นความกว้างของวิวพอร์ต */

ความสูงสูงสุด: 100dvh; /* ตรวจสอบให้แน่ใจว่าไม่ล้นความสูงของวิวพอร์ต */

ระยะขอบ: อัตโนมัติ; /* จัดองค์ประกอบให้อยู่ตรงกลาง */

-

2. จัดกึ่งกลางแนวนอนเท่านั้น

หากคุณต้องการจัดกึ่งกลางองค์ประกอบในแนวนอน (เช่น แบนเนอร์คุกกี้ที่ด้านล่าง) ให้ทำดังนี้

  • ตำแหน่งคงที่:

position: fixed; รักษาองค์ประกอบให้อยู่กับที่

  • ยึดกับขอบ:

– ใช้ left: 0; และ right: 0; เพื่อยืดจากด้านหนึ่งไปอีกด้านหนึ่งในแนวนอน

– ตั้งค่า bottom: 8px; เพื่อวางตำแหน่งจากขอบด้านล่าง

  • ข้อจำกัดและศูนย์กลาง:

– กำหนดความกว้างคงที่

– ใช้ margin-inline: auto; เพื่อจัดกึ่งกลางในแนวนอน

รหัสตัวอย่าง:

.element {

position: fixed;

left: 0;

right: 0;

bottom: 8px; /* Positions from the bottom edge */

width: 12rem; /* Sets a fixed width */

max-width: calc(100vw - 16px); /* Ensures it fits within the viewport with some buffer */

margin-inline: auto; /* Centers horizontally */

}

3. การจัดองค์ประกอบให้อยู่ตรงกลางด้วยขนาดที่ไม่ทราบ

หากคุณไม่ทราบขนาดขององค์ประกอบ แต่ยังต้องการให้อยู่ตรงกลาง ให้ทำดังนี้

  • ใช้ Fit-เนื้อหา:

width: fit-content; และ height: fit-content; อนุญาตให้องค์ประกอบย่อขนาดเนื้อหา

  • ใช้การจัดกึ่งกลาง:

– รวมกับ position: fixed; และ margin: auto; เพื่อให้มันอยู่ตรงกลาง

รหัสตัวอย่าง:

.element {

position: fixed;

inset: 0;

width: fit-content; /* Shrinks to fit content */

height: fit-content; /* Shrinks to fit content */

margin: auto; /* Centers the element */

}

ด้วยวิธีการเหล่านี้ คุณสามารถจัดองค์ประกอบให้อยู่ตรงกลางในวิวพอร์ตได้อย่างง่ายดาย โดยไม่คำนึงถึงขนาด


วิธีที่ 4: วิธีจัดกึ่งกลาง DIV ด้วย CSS Grid

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

1. การจัดองค์ประกอบเดียวให้อยู่ตรงกลาง

หากต้องการจัดองค์ประกอบให้อยู่ตรงกลางภายในคอนเทนเนอร์ คุณสามารถใช้การตั้งค่าง่ายๆ ด้วย CSS Grid:

  • ตั้งค่าการแสดงตาราง:

display: grid; เปลี่ยนภาชนะให้เป็นตาราง

  • ใช้สถานที่เนื้อหา:

place-content: center; เป็นทางลัดที่จัดกึ่งกลางเนื้อหาทั้งแนวนอนและแนวตั้ง โดยจะตั้งค่าทั้ง justify-content (แนวนอน) และ align-content (แนวตั้ง) ให้อยู่ center

รหัสตัวอย่าง:

css

.คอนเทนเนอร์ {

จอแสดงผล: ตาราง;

เนื้อหาสถานที่: ศูนย์กลาง; /* จัดกึ่งกลางเนื้อหาทั้งแนวนอนและแนวตั้ง */

-

ซึ่งจะทำให้องค์ประกอบตั้งอยู่ตรงกลางคอนเทนเนอร์ โดยไม่คำนึงถึงขนาด

2. ข้อแตกต่างจาก Flexbox

แม้ว่า CSS Grid จะสามารถจัดรายการไว้ตรงกลางได้ แต่ก็มีการทำงานแตกต่างออกไปเมื่อเทียบกับ Flexbox:

– Flexbox: จัดกึ่งกลางรายการตามขนาดและขนาดคอนเทนเนอร์

– CSS Grid: จัดกึ่งกลางรายการตามขนาดของเซลล์กริด ซึ่งอาจยุ่งยากหากไม่ได้กำหนดขนาดเซลล์กริด

ตัวอย่างโค้ดในตารางที่มีเปอร์เซ็นต์:

css

.คอนเทนเนอร์ {

จอแสดงผล: ตาราง;

เนื้อหาสถานที่: ศูนย์กลาง;

-

.องค์ประกอบ {

ความกว้าง: 50%; /* ความกว้างคือ 50% ของเซลล์กริด */

ความสูง: 50%; /* ความสูงคือ 50% ของเซลล์กริด */

-

หากไม่ได้ระบุขนาดเซลล์กริด องค์ประกอบอาจมีขนาดเล็กกว่าที่คาดไว้ Flexbox มักจะง่ายกว่าสำหรับการจัดกึ่งกลางขั้นพื้นฐาน

3. การจัดองค์ประกอบหลายรายการให้อยู่ตรงกลาง

CSS Grid ยังสามารถจัดการหลายองค์ประกอบในเซลล์เดียวกัน:

  • กำหนดองค์ประกอบหลายรายการให้กับเซลล์เดียวกัน:

– ใช้ grid-row และ grid-column เพื่อวางรายการในเซลล์ตารางเดียวกัน

  • รายการกึ่งกลางภายในเซลล์:

– เพิ่ม place-items: center; เพื่อจัดกึ่งกลางรายการภายในเซลล์กริด

รหัสตัวอย่าง:

css

.คอนเทนเนอร์ {

จอแสดงผล: ตาราง;

เนื้อหาสถานที่: ศูนย์กลาง; /* จัดกึ่งกลางเซลล์กริด */

รายการสถานที่: ศูนย์กลาง; /* จัดกึ่งกลางรายการภายในเซลล์ */

-

.องค์ประกอบ {

ตารางแถว: 1;

ตาราง-คอลัมน์: 1; /* องค์ประกอบทั้งหมดอยู่ในเซลล์เดียวกัน */

-

การตั้งค่านี้จะซ้อนสินค้าหลายรายการไว้ที่กึ่งกลางคอนเทนเนอร์ แม้ว่าจะมีขนาดแตกต่างกันก็ตาม

ประเด็นสำคัญ

CSS Grid เหมาะสำหรับเลย์เอาท์ที่ซับซ้อนและเมื่อคุณต้องการการควบคุมตำแหน่งที่แม่นยำ

– โดยปกติแล้ว Flexbox จะง่ายกว่าสำหรับงานจัดศูนย์กลางที่ไม่ซับซ้อน

ด้วยพื้นฐานเหล่านี้ คุณสามารถใช้ CSS Grid เพื่อจัดองค์ประกอบทั้งเดี่ยวและหลายองค์ประกอบให้อยู่ตรงกลางในสถานการณ์ต่างๆ


วิธีที่ 5: วิธีจัดกึ่งกลางข้อความใน CSS

การจัดกึ่งกลางข้อความแตกต่างจากการจัดกึ่งกลางองค์ประกอบอื่นๆ เช่น รูปภาพหรือ div นี่เป็นวิธีง่ายๆ ในการดำเนินการ:

การจัดกึ่งกลางบล็อกข้อความ

เมื่อคุณต้องการจัดกลุ่มข้อความให้อยู่ตรงกลางภายในคอนเทนเนอร์ (เช่น ย่อหน้าใน div) คุณจะต้องใช้คุณสมบัติ text-align วิธีนี้ได้ผลดีที่สุดเมื่อข้อความอยู่ภายในองค์ประกอบระดับบล็อก เช่น div , p หรือ h1

ต่อไปนี้เป็นวิธีดำเนินการ:

css

.คอนเทนเนอร์ {

การจัดแนวข้อความ: กึ่งกลาง;

-

รหัสนี้บอกให้เบราว์เซอร์จัดกึ่งกลางข้อความภายในคอนเทนเนอร์ หากคุณต้องการจัดคอนเทนเนอร์ให้อยู่ตรงกลาง คุณสามารถใช้ Flexbox หรือ Grid เพื่อดำเนินการดังกล่าว:

css

.คอนเทนเนอร์ {

จอแสดงผล: ดิ้น;

ปรับเนื้อหา: กึ่งกลาง;

จัดรายการ: กึ่งกลาง;

ความสูง: 100vh; /* ทำให้คอนเทนเนอร์สูงเต็มเพื่อจัดกึ่งกลางแนวตั้ง */

-

แล้ว Flexbox และ Grid ล่ะ?

Flexbox และ Grid เหมาะอย่างยิ่งสำหรับการจัดกึ่งกลางคอนเทนเนอร์ทั้งหมด แต่ไม่ได้จัดข้อความไว้ตรงกลางภายในคอนเทนเนอร์เหล่านั้น หากคุณใช้ Flexbox หรือ Grid เพื่อจัดกึ่งกลางย่อหน้า บล็อกข้อความจะจัดกึ่งกลาง ไม่ใช่แต่ละบรรทัดหรืออักขระภายใน

จัดกึ่งกลางข้อความด้วย Flexbox

หากคุณใช้ Flexbox เพื่อจัดกึ่งกลางย่อหน้า เช่นนี้

css

.คอนเทนเนอร์ {

จอแสดงผล: ดิ้น;

ปรับเนื้อหา: กึ่งกลาง;

จัดรายการ: กึ่งกลาง;

ความสูง: 100vh;

-

โดยจะจัดกึ่งกลางทั้งย่อหน้าภายในคอนเทนเนอร์ แต่หากต้องการจัดข้อความให้อยู่กึ่งกลางภายในย่อหน้านั้น คุณต้องมี text-align: center; -

คุณสมบัติ CSS ในอนาคต

มีการพัฒนาที่น่าตื่นเต้นใน CSS! คุณสมบัติใหม่กำลังจะมาซึ่งจะทำให้การจัดศูนย์กลางง่ายยิ่งขึ้น ในตอนนี้ ใช้ Flexbox หรือ Grid พร้อม text-align: center; เป็นวิธีที่ดีที่สุดในการจัดการกับมัน

วิธีการง่ายๆ นี้ช่วยให้ข้อความของคุณดูดีและอยู่กึ่งกลางไม่ว่าจะอยู่ที่ใดก็ตามบนหน้าของคุณ!

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


WPOven Dedicated Hosting

บทสรุป

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

  • ขอบอัตโนมัติ: ใช้สิ่งนี้เพื่อจัดกึ่งกลางแนวนอนอย่างง่าย
  • Flexbox: เหมาะสำหรับการจัดวางรายการไว้ตรงกลางทั้งสองทิศทาง และเมื่อทำงานกับแถวหรือคอลัมน์ของรายการ
  • การจัดกึ่งกลางวิวพอร์ต: เหมาะสำหรับป๊อปอัปหรือองค์ประกอบที่ต้องอยู่ตรงกลางหน้าจอ
  • CSS Grid: เหมาะสำหรับเลย์เอาต์ที่ซับซ้อน และเมื่อต้องการจัดกึ่งกลางทั้งแถวและคอลัมน์

หากคุณมีข้อสงสัยหรือข้อสงสัยเกี่ยวกับโพสต์นี้ โปรดแจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง: