จะจัดแนวตั้งตรงกลางเนื้อหาของ div ด้วยความกว้าง / ความสูงที่กำหนดได้อย่างไร?

สิ่งที่จะเป็นวิธีการที่ถูกต้องในแนวตั้งศูนย์เนื้อหาใด ๆ divในที่กำหนดไว้กว้าง

ในตัวอย่างที่.contentมีสองเนื้อหามีความสูงที่แตกต่างกันว่าเป็นวิธีที่ดีที่สุดในการศูนย์แนวตั้งทั้งใช้ในชั้นเรียน (และใช้ได้กับทุกเบราว์เซอร์และไม่มีวิธีแก้ปัญหาtable-cell)

มีการแก้ปัญหาบางอย่างในใจ แต่อยากจะรู้ว่าความคิดอื่น ๆ มีการใช้และposition:absolute; top:0; bottom: 0;margin auto

ฉันได้ค้นคว้าเรื่องนี้เล็กน้อยและจากสิ่งที่ฉันพบคุณมีสี่ตัวเลือก:

เวอร์ชัน 1: พาเรนต์ div พร้อมแสดงเป็นเซลล์ตาราง

หากคุณไม่ต้องการใช้display:table-cellบน div หลักของคุณคุณสามารถใช้ตัวเลือกต่อไปนี้:

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}​

การสาธิตสด

เวอร์ชัน 2: พาเรนต์ div พร้อมบล็อกการแสดงผลและเซลล์ตารางการแสดงเนื้อหา

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:block;
}

.content {
    height: 100px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;    
}​

การสาธิตสด

เวอร์ชัน 3: div หลักลอยและ div เนื้อหาเป็นเซลล์ตารางที่แสดง

.area{
    background: red;
    margin:10px;
    text-align: center;
    display:block;
    float: left;
}

.content {
    display:table-cell;
    vertical-align:middle;
    height: 100px;
    width: 100px;
}​

การสาธิตสด

เวอร์ชัน 4: ตำแหน่ง div หลักสัมพันธ์กับตำแหน่งเนื้อหาสัมบูรณ์

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

.area{
    position:relative; 
    display:block;
    height:100px;
    width:100px;
    border:1px solid black;
    background:red;
    margin:10px;
}

.content { 
    position:absolute;
    top:50%; 
    height:50%; 
    width:100px;
    margin-top:-25%;
    text-align:center;
}​

การสาธิตสด

นอกจากนี้ยังสามารถทำได้โดยใช้รหัสdisplay: flexเพียงไม่กี่บรรทัด นี่คือตัวอย่าง:

.container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
}

การสาธิตสด

ฉันพบวิธีแก้ปัญหานี้ในบทความนี้

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

มันทำงานได้อย่างมีเสน่ห์หากไม่ได้กำหนดความสูงขององค์ประกอบ

เคล็ดลับง่ายๆในการจัดกึ่งกลางเนื้อหาของ div ในแนวตั้งคือการตั้งค่าความสูงของเส้นให้เท่ากับความสูง:

<div>this is some line of text!</div>
div {
width: 400px
height: 50px;
line-height: 50px;
}

แต่ใช้ได้กับข้อความบรรทัดเดียวเท่านั้น!

แนวทางที่ดีที่สุดคือ div เป็นคอนเทนเนอร์และช่วงที่มีค่าอยู่ในนั้น:

.cont {
  width: 100px;
  height: 30px;
  display: table;
}

.val {
  display: table-cell;
  vertical-align: middle;
}

    <div class="cont">
      <span class="val">CZECH REPUBLIC, 24532 PRAGUE, Sesame Street 123</span>
    </div>

margin: all_four_margin

โดยการให้ 50% กับ all_four_margin จะทำให้องค์ประกอบอยู่ตรงกลาง

style="margin: 50%"

คุณสามารถนำไปใช้เพื่อติดตามได้เช่นกัน

ขอบ: บนขวาล่างซ้าย

ขอบ: ขวาบนและล่างซ้าย

ระยะขอบ: บนและล่างขวาและซ้าย

โดยการให้% ที่เหมาะสมเราจะได้องค์ประกอบทุกที่ที่เราต้องการ