จัดกึ่งกลางแนวนอน

text-align: center;
สามารถใช้จัดการกับตัวหนังสือได้เป็นอย่างดี

display: block;
margin: auto;
snippet อีกอย่างที่มักจะใช้กับ block element อย่างเช่น div หรือสามารถนำไปประยุกต์ใช้กับรูปภาพได้อีกด้วย เพื่อให้รูปภาพอยู่กึ่งกลาง

text-align: center;
display: inline-block;
ใช้บ่อยกับ list ที่อยู่ในรูปแบบเรียงกันในแนวนอน ใช้กับเมนูที่ใช้ ul, li ได้เลย

display: flex;
justify-content: center;
snippet สุดท้าย เป็นการใช้ flex เข้ามาช่วย เห็นไม่บ่อย เพราะ web broswer เก่าๆ อย่าง IE เวอร์ชั่น 9 ยังไม่รองรับ flexbox ส่วนคนที่ใช้ modern browser นั้นสามารถใช้งานได้ปรกติ และง่าย, ได้ผลดีกว่า snippet อื่นๆ ด้วย

จัดกึ่งกลางแนวตั้ง

ส่วนที่เป็น block ให้ใช้

display: table;
และส่วนที่เป็น element ลูกที่อยู่ข้างในใช้

display: table-cell;
text-align: center;
vertical-align: middle;
เหมือนจะทำให้ div กลายเป็นการใช้งานแบบ table ซึ่งเราต้องสร้าง parent หรือที่เป็น block level ให้ใช้ display แบบ table เสียก่อน แล้วค่อยให้ child level เป็นแบบ table-cell ข้อดีคือ browser จะคำนวณระยะห่างจากบนลงล่าง และ ซ้ายมาขวาให้เอง ไม่ว่า content ของ child level จะยืดขนาดไหน

อีกวิธีนึงจะเป็นการขยายจากตัวของ content เองด้วย padding เช่น

padding-top: 20px;
padding-bottom: 20px;
อันนี้จะเหมาะกับประเภทของ link หรือ div หรือ input ที่บางครั้งอาจจะต้องการสร้างให้เหมือนกับปุ่ม หรือเป็น navigation

กึ่งกลางทั้งแนวตั้ง และนอน

วิธีแรกเป็นแบบโบราณ ที่ใช้กันมานมนาน แต่ยังใช้ได้อยู่จนถึงปัจจุบัน แล้วก็ใช้กับ web browser เก่าๆ อย่าง IE8 ด้วย ซึ่งข้อเสียมีเพียงอย่างเดียวคือจำเป็นต้องรู้ทั้งความกว้าง และความสูงที่แน่นอนเสียก่อน (อาจจะใช้ Javascript ช่วยเพื่อหาได้)

width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;

คือ ถ้าความกว้าง และสูงมีค่าเท่าไหร่ ให้นำไปหารออกครึ่งนึงแล้วนำค่านั้นไปยัดลงกับ margin (ต้องเป็นค่าติดลบ)

วิธีสุดท้ายเป็นการใช้ flexbox ซึ่งจะง่าย และสั้นกว่าแบบแรก แต่ข้อเสียก็คือไม่สามารถใช้ร่วมกับ web browser ที่ต่ำกว่า IE9(หรือ IE10)

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

เพียงใช้ snippet ข้างต้นไปใส่กับ block level เพียงเท่านี้ก็สามารถจัดตำแหน่งของ content ภายในให้อยู่แบบกึ่งกลางได้แล้ว