ตรงกลางแนวตั้งใน <div>

ฉันต้องการให้ความสูงของ#abc divที่50pxและข้อความจัดแนวตั้งตรงกลางไฟล์div.

body{
  padding: 0;
  margin: 0;
  margin: 0px auto;
}

#main{
  position: relative;
  background-color:blue;
  width:500px;
  height:500px;
}

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
}

<div id="main">
 <div id="abc">
     asdfasdfafasdfasdf
 </div>
</div>

คุณสามารถใช้line-height: 50px;คุณไม่จำเป็นต้องvertical-align: middle;มี

การสาธิต

ดังกล่าวข้างต้นจะล้มเหลวถ้าคุณได้หลายบรรทัดดังนั้นในกรณีที่คุณสามารถตัดข้อความของคุณโดยใช้spanและกว่าการใช้display: table-cell;และdisplay: table;พร้อมกับvertical-align: middle;ยังไม่ลืมที่จะใช้width: 100%;สำหรับ#abc

การสาธิต

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  display: table;
  width: 100%;
}

#abc span {
  vertical-align:middle;
  display: table-cell;
}

อีกวิธีหนึ่งที่ฉันคิดได้ที่นี่คือการใช้transformคุณสมบัติtranslateY()ที่Yชัดเจนว่าย่อมาจากแกน Y มันค่อนข้างตรงไปตรงมา ... สิ่งที่คุณต้องทำคือตั้งค่าตำแหน่งองค์ประกอบไปที่absoluteตำแหน่งต่อมา50%จากtopและแปลจากแกนเป็นลบ-50%

div {
  height: 100px;
  width: 100px;
  background-color: tomato;
  position: relative;
}

p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

การสาธิต

โปรดทราบว่าสิ่งนี้ไม่ได้รับการสนับสนุนในเบราว์เซอร์รุ่นเก่าเช่น IE8 แต่คุณสามารถสร้าง IE9 และเบราว์เซอร์ Chrome และ Firefox เวอร์ชันเก่าอื่น ๆ ได้โดยใช้-ms, -mozและ-webkitคำนำหน้าตามลำดับ

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการtransformที่คุณสามารถดูที่นี่

มันง่ายมาก: ให้ div ผู้ปกครองสิ่งนี้:

display: table;

และให้ลูกหารสิ่งนี้:

display: table-cell;
vertical-align: middle;

แค่นั้นแหละ!

.parent{
    display: table;
}
.child{
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}

<div class="parent">
    <div class="child">
        Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test <br/> Test Test Test
    </div>
<div>

คำถามเก่า แต่ปัจจุบัน CSS3ทำให้การจัดแนวตั้งง่ายมาก!

เพียงเพิ่ม#abcใน css ต่อไปนี้:

display:flex;
align-items:center;

การสาธิตอย่างง่าย

อัปเดตการสาธิตคำถามเดิมแล้ว

ตัวอย่างง่ายๆ:

.vertical-align-content {
  background-color:#f18c16;
  height:150px;
  display:flex;
  align-items:center;
  /* Uncomment next line to get horizontal align also */
  /* justify-content:center; */
}

<div class="vertical-align-content">
  Hodor!
</div>

ฉันพบวิธีแก้ปัญหานี้โดย Sebastian Ekström มันรวดเร็วสกปรกและใช้งานได้ดีจริงๆ แม้ว่าคุณจะไม่ทราบความสูงของผู้ปกครอง:

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

อ่านบทความเต็มได้ที่นี่

คุณสามารถใช้ Line height ให้ใหญ่เท่ากับความสูงของ div แต่สำหรับฉันทางออกที่ดีที่สุดคือ ->position:relative; top:50%; transform:translate(0,50%);

เพิ่มแล้วline-heightไง?

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
  line-height: 45px;
}

ซอสายสูง

หรือpaddingบน#abc. นี่คือผลลัพธ์ที่เกิดจากช่องว่างภายใน

ปรับปรุง

เพิ่มใน css ของคุณ:

#abc img{
   vertical-align: middle;
}

ผลที่ตามมา หวังว่านี่คือสิ่งที่คุณกำลังมองหา

ลองสิ่งนี้:

.main_div{
    display: table;
    width: 100%;
}
.cells {
    display: table-cell;
    vertical-align: middle;
}

อีกวิธีหนึ่งในการจัดกึ่งกลาง div:

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 100px;
    margin: auto;
}

ใช้คุณสมบัติ translateY CSS เพื่อจัดกึ่งกลางข้อความของคุณในแนวตั้งในคอนเทนเนอร์

<style>
.centertext{

    position: relative;
    top: 50%;
    transform: translateY(40%);

}
</style>

จากนั้นนำไปใช้กับ DIV ที่มีของคุณ

  <div class="centertext">
        <font style="color:white; font-size:20px;">   Your Text Here </font>
  </div>

ปรับเปอร์เซ็นต์การแปลภาษาให้เหมาะกับความต้องการของคุณ หวังว่านี่จะช่วยได้

รหัสนี้ใช้สำหรับแนวตั้งตรงกลางและแนวนอนตรงกลางโดยไม่ระบุความสูงคงที่:

.parent-class-name {
  position: relative;
}

.className {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}