ฉันจะจัดแนวข้อความใน div ในแนวตั้งได้อย่างไร

ฉันพยายามหาวิธีที่มีประสิทธิภาพที่สุดในการจัดแนวข้อความกับ div ฉันลองทำบางสิ่งแล้วก็ดูเหมือนจะไม่มีอะไรทำงาน

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

การจัดกึ่งกลางแนวตั้งใน CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

สรุปบทความ:

สำหรับเบราว์เซอร์ CSS 2 หนึ่งสามารถใช้display:table/ display:table-cellเพื่อจัดกึ่งกลางเนื้อหา

ตัวอย่างมีให้บริการที่JSFiddle :

div { border:1px solid green;}

<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

เป็นไปได้ที่จะรวมแฮ็กสำหรับเบราว์เซอร์เก่า (Internet Explorer 6/7) เข้ากับสไตล์โดยใช้#เพื่อซ่อนสไตล์จากเบราว์เซอร์รุ่นใหม่:

div { border:1px solid green;}

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>

คุณจำเป็นต้องเพิ่มแอตทริบิวต์และแอตทริบิวต์ที่จะต้องตรงกับความสูงของline-height divในกรณีของคุณ:

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}

<div class="center">
  A single line.
</div>

ในความเป็นจริงคุณอาจลบheightแอตทริบิวต์ทั้งหมด

วิธีนี้ใช้ได้กับข้อความบรรทัดเดียวเท่านั้นดังนั้นควรใช้ความระมัดระวัง

นี่เป็นแหล่งข้อมูลที่ยอดเยี่ยม

จากhttp://howtocenterincss.com/ :

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

ใช้ Flexbox

สอดคล้องกับการรักษาโพสต์นี้ด้วยเทคโนโลยีล่าสุดนี่เป็นวิธีที่ง่ายกว่ามากในการจัดกึ่งกลางของสิ่งที่ใช้ Flexbox flexbox ไม่สนับสนุนในInternet Explorer 9 และล่าง

นี่เป็นแหล่งข้อมูลที่ดี:

• คำแนะนำเกี่ยวกับ Flexbox
• องค์ประกอบตรงกลางด้วย Flexbox
• ไวยากรณ์ Internet Explorer 10 สำหรับ Flexbox
• รองรับ Flexbox

JSFiddle พร้อมคำนำหน้าเบราว์เซอร์

li {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  /* Column | row */
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

ทางออกอื่น

นี่คือจากศูนย์ค่าสามและให้คุณกึ่งกลางอะไรกับหกบรรทัดของ CSS

วิธีการนี้จะไม่ได้รับการสนับสนุนในInternet Explorer 8 และต่ำกว่า

jsfiddle

p {
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

คำตอบก่อนหน้า

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

วิธีการในแนวตั้งและแนวนอนศูนย์ข้อความในทั้งสองรายการเรียงลำดับและ div โดยไม่ต้อง resorting JavaScript หรือ CSS สูงบรรทัด ไม่ว่าคุณจะมีข้อความมากน้อยเพียงใดคุณไม่จำเป็นต้องใช้คลาสพิเศษใด ๆ กับรายการหรือ div เฉพาะ (รหัสจะเหมือนกันสำหรับแต่ละรายการ) สามารถใช้งานได้กับเบราว์เซอร์ที่สำคัญทั้งหมดรวมถึง Internet Explorer 9, Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Firefox, Chrome, Operaและ Safari มีสองสไตล์พิเศษ (หนึ่งสำหรับ Internet Explorer 7 และอีกหนึ่งสำหรับ Internet Explorer 6) เพื่อช่วยพวกเขาตามข้อ จำกัด ของ CSS ซึ่งเบราว์เซอร์ที่ทันสมัยไม่มี

Andy Howard - วิธีการจัดกึ่งกลางข้อความในแนวตั้งและแนวนอนในรายการที่ไม่เรียงลำดับหรือ div

เนื่องจากฉันไม่สนใจ Internet Explorer 7/6 มากสำหรับโครงการสุดท้ายที่ฉันทำงานฉันจึงใช้เวอร์ชันที่มีการตัดทอนเล็กน้อย (เช่นลบสิ่งที่ทำให้ใช้งานได้ใน Internet Explorer 7 และ 6) มันอาจจะมีประโยชน์สำหรับคนอื่น ...

JSFiddle

.outerContainer {
  display: table;
  width: 100px;
  /* Width of parent */
  height: 100px;
  /* Height of parent */
  overflow: hidden;
}

.outerContainer .innerContainer {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

li {
  background: #ddd;
  width: 100px;
  height: 100px;
}

<ul>
  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>

  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>
</ul>

display: flexมันเป็นเรื่องง่ายด้วย ด้วยวิธีการต่อไปนี้ข้อความในdivจะอยู่กึ่งกลางแนวตั้ง:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

และถ้าคุณต้องการแนวนอน:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

คุณต้องเห็นเวอร์ชันเบราว์เซอร์ที่คุณต้องการ รหัสในรุ่นเก่าไม่สามารถใช้งานได้

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

HTML:

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS:

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

ศูนย์นี้ข้อความในฉันไปที่ตรงกลางแนวตั้งที่แน่นอนของนอกdiv 200px สูง divโปรดทราบว่าคุณอาจต้องใช้คำนำหน้าเบราว์เซอร์ (เช่น-webkit-ในกรณีของฉัน) เพื่อใช้งานกับเบราว์เซอร์ของคุณ

สิ่งนี้ใช้ได้กับข้อความเท่านั้น แต่ยังรวมถึงองค์ประกอบอื่น ๆ ด้วย

คุณสามารถทำได้โดยการตั้งค่าการแสดงผลเป็น 'ตารางเซลล์' และใช้vertical-align: middle;:

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

อย่างไรก็ตามนี่ไม่ได้รับการสนับสนุนโดย Internet Explorer ทุกรุ่นตามข้อความที่ตัดตอนมานี้ฉันคัดลอกมาจากhttp://www.w3schools.com/cssref/pr_class_display.aspโดยไม่ได้รับอนุญาต

หมายเหตุ:ค่า "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row -group "และ" สืบทอด "ไม่รองรับโดย Internet Explorer 7 และรุ่นก่อนหน้า Internet Explorer 8 ต้องการ! DOCTYPE Internet Explorer 9 รองรับค่าต่างๆ

แสดงให้เห็นว่าตารางต่อไปนี้แสดงผลได้รับอนุญาตค่าจากhttp://www.w3schools.com/cssref/pr_class_display.asp

วันนี้ (เราไม่ต้องการ Internet Explorer 6-7-8 อีกต่อไป) ฉันจะใช้ CSS display: tableสำหรับปัญหานี้ (หรือdisplay: flex)

สำหรับเบราว์เซอร์รุ่นเก่า:

โต๊ะ:

.vcenter {
    display: table;
    background: #eee; /* optional */
    width: 150px;
    height: 150px;
    text-align: center; /* optional */
}

.vcenter > :first-child {
    display: table-cell;
    vertical-align: middle;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>

Flex:

.vcenter {
    display: flex; /* <-- Here */
    align-items: center; /* <-- Here */
    justify-content: center; /* optional */
    height: 150px; /* <-- Here */
    background: #eee;  /* optional */
    width: 150px;
}

<div class="vcenter">
  <p>This is my text</p>
</div>

นี่คือ (ที่จริงแล้ว) โซลูชั่นที่ฉันโปรดปรานสำหรับปัญหานี้ (รองรับเบราว์เซอร์ที่เรียบง่ายและดีมาก):

div {
    margin: 5px;
    text-align: center;
    display: inline-block;
}

.vcenter {
    background: #eee;  /* optional */
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}

.vcenter > :first-child {
    display: inline-block;
    vertical-align: middle;
    max-width: 99.999%;
}

<div class="vcenter">
  <p>This is my text</p>
</div>
<div class="vcenter">
  <h4>This is my Text<br/>Text<br/>Text</h4>
</div>
<div class="vcenter">
  <div>
   <p>This is my</p>
   <p>Text</p>
  </div>
</div>

ลองนี้เพิ่ม div หลัก:

display: flex;
align-items: center;

นี่คือทางออกที่ดีที่สุดสำหรับข้อความบรรทัดเดียว

นอกจากนี้ยังสามารถทำงานกับข้อความที่มีหลายแถวพร้อมปรับแต่งได้หากทราบจำนวนบรรทัด

.testimonialText {
    font-size: 1em; /* Set a font size */
}
.testimonialText:before { /* Add a pseudo element */
    content: "";
    display: block;
    height: 50%;
    margin-top: -0.5em; /* Half of the font size */
}

นี่คือ JSFiddle

<!DOCTYPE html>
<html>

  <head>
    <style>
      .container {
        height: 250px;
        background: #f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>

</html>

คุณสามารถจัดข้อความกึ่งกลางในแนวตั้งภายใน div โดยใช้ Flexbox

<div>
   <p class="testimonialText">This is the testimonial text.</p>
</div>

div {
   display: flex;
   align-items: center;
}

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับมันที่สมบูรณ์คู่มือ flexbox

ตรวจสอบวิธีแก้ปัญหาง่ายๆนี้:

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float: left;
    display: block;
    width: 100%;
    height: 88px
}

.block-title h3 {
    display: table-cell;
    vertical-align: middle;
    height: inherit
}

JSFiddle

มีวิธีที่ง่ายกว่าในการจัดเรียงเนื้อหาในแนวตั้งโดยไม่ต้องหันไปใช้ตาราง / เซลล์ตาราง:

http://jsfiddle.net/bBW5w/1/

ในนั้นฉันได้เพิ่ม div ที่มองไม่เห็น (width = 0) ที่สมมติว่าความสูงทั้งหมดของคอนเทนเนอร์

ดูเหมือนว่าจะทำงานใน Internet Explorer และ Firefox (รุ่นล่าสุด) ฉันไม่ได้ตรวจสอบกับเบราว์เซอร์อื่น

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

และแน่นอน CSS:

.t, .t > div:first-child
{
    border: 1px solid green;
}
.t
{
    height: 400px;
}
.t > div
{
    display: inline-block;
    vertical-align: middle
}
.t > div:last-child
{
    height: 100%;
}

นี่เป็นวิธีการแก้ปัญหาที่สะอาดที่สุดที่ฉันพบ (Internet Explorer 9+) และเพิ่มการแก้ไขสำหรับปัญหา "off by .5 pixel" โดยใช้transform-styleคำตอบอื่น ๆ ที่ถูกข้ามไป

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

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

ที่มา: แนวตั้งจัดอะไรกับ CSS เพียง 3 บรรทัด

ทางออกที่ง่ายสำหรับองค์ประกอบที่ไม่ทราบค่า:

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

ตามคำตอบของ Adam Tomat มีการจัดทำตัวอย่าง JSFiddle เพื่อจัดแนวข้อความในdiv :

<div class="cells-block">    
    text<br/>in the block   
</div>

โดยใช้display: flexใน CSS:

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* Vertically   */
    justify-content: flex-end; /* Horisontally */
    text-align: right;         /* Addition: for text's lines */
}

อีกตัวอย่างและคำอธิบายบางอย่างในบล็อกโพสต์

ระยะขอบอัตโนมัติในรายการกริด

เช่นเดียวกับ Flexbox การใช้มาร์จิ้นอัตโนมัติในรายการกริดจัดกึ่งกลางมันไว้บนแกนทั้งสอง:

.container {
  display: grid;
}
.element {
  margin: auto;
}

Flexboxทำงานได้อย่างสมบูรณ์แบบสำหรับฉันโดยมีองค์ประกอบหลายอย่างอยู่ภายใน div parent ในแนวนอนและแนวตั้ง

HTML-Code:

<div class="parent-div">
    <div class="child-div">
      <a class="footer-link" href="https://www.github.com/">GitHub</a>
      <a class="footer-link" href="https://www.facebook.com/">Facebook</a>
      <p class="footer-copywrite">© 2019 Lorem Ipsum.</p>
    </div>
  </div>

CSS-Code:
โค้ดด้านล่างจัดเรียงองค์ประกอบทั้งหมดที่อยู่ใน parent-div ในคอลัมน์โดยมีองค์ประกอบอยู่ตรงกลางในแนวนอนและแนวตั้ง ฉันใช้ child-div เพื่อให้ทั้งสององค์ประกอบ Anchor อยู่ในบรรทัดเดียวกัน (แถว) หากไม่มีองค์ประกอบย่อยทั้งสามองค์ประกอบ (Anchor, Anchor & Parameter) จะซ้อนกันภายในคอลัมน์ของ parent-div ด้านบนของกันและกัน ที่นี่ child-div เท่านั้นที่ถูกสแต็กภายในคอลัมน์ parent-div

/* */
.parent-div {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

ใช้:

h1 {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.container {
    height: 200px;
    width: 500px;
    position: relative;
    border: 1px solid #eee;
}

<div class="container">
    <h1>Vertical align text</h1>
</div>

ด้วยเคล็ดลับนี้คุณสามารถจัดตำแหน่งอะไรก็ได้ถ้าคุณไม่ต้องการทำให้มันอยู่ตรงกลางเพิ่ม "ซ้าย: 0" เพื่อจัดแนวซ้าย

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative {
     position: relative;
 }
 .absolute {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.5);
 }
 .table {
     display: table;
     height: 100%;
     width: 100%;
     text-align: center;
     color: #fff;
 }
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }

การใช้เฟล็กซ์ต้องระวังความแตกต่างในการแสดงผลของเบราว์เซอร์

สิ่งนี้ใช้ได้ดีทั้งสำหรับ Chrome และ Internet Explorer:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}

<div class="outer"><div class="inner">Active Tasks</div></div>

เปรียบเทียบกับอันนี้ใช้งานได้กับ Chrome เท่านั้น:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: #fcc;
}

<div class="outer">
<div class="inner"><span style=" margin: auto;">Active Tasks</span></div>
</div>

นี่คือการเปลี่ยนแปลงอีกหนึ่งของdivในdivรูปแบบที่ใช้calc()ใน CSS

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

ใช้งานได้เพราะ:

• position:absoluteสำหรับตำแหน่งที่แม่นยำdivภายในdiv
• เรารู้ว่าความสูงของชั้นในเพราะเรากำหนดให้div20px
• calc(50% - 10px)สำหรับ50% - ครึ่งความสูงสำหรับการจัดกึ่งกลางภายในdiv

ใช้งานได้ดี:

HTML

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

Sass

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

ไม่และด้วยแท็กรูปภาพ<mat-icon>(ซึ่งเป็นแบบอักษร)

อืมมีหลายวิธีที่จะแก้ปัญหานี้ได้อย่างชัดเจน

แต่ฉันมี<div>ตำแหน่งที่แน่นอนheight:100%(จริง ๆ แล้วtop:0;bottom:0และความกว้างคงที่) และdisplay:table-cellเพียงแค่ไม่ได้ใช้งานข้อความกลางในแนวตั้ง โซลูชันของฉันต้องการองค์ประกอบด้านใน แต่ฉันเห็นโซลูชันอื่น ๆ อีกมากมายที่ทำเช่นกันดังนั้นฉันจึงอาจเพิ่ม:

ที่เก็บของฉันคือ.labelและฉันต้องการหมายเลขที่อยู่กึ่งกลางในแนวตั้ง ฉันทำได้โดยการวางตำแหน่งtop:50%และตั้งค่าอย่างแน่นอนline-height:0

<div class="label"><span>1.</span></div>

และ CSS มีดังนี้:

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

ดูการทำงาน: http://jsfiddle.net/jcward/7gMLx/

คุณสามารถใช้ flexboxCSS

.testimonialText {
  height: 500px;
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b4d2d2;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

การใช้ตาราง CSS ทำเพื่อฉัน:

.outer {
  background-color: grey;
  width: 10rem;
  height: 10rem;
  display: grid;
  justify-items: center;
}

.inner {
  background-color: red;
  align-self: center;
}

<div class='outer'>
  <div class='inner'>
    Content
  </div>
</div>

ลองฝังองค์ประกอบตาราง

<div>
  <table style='width:200px; height:100px;'>
    <td style='vertical-align:middle;'>
      copenhagen
    </td>
  </table>
</div>

มีหลายเทคนิคในการแสดงเนื้อหาหรือภาพที่อยู่ตรงกลางของ div คำตอบบางคำตอบก็ดีและฉันก็เห็นด้วยอย่างยิ่ง

สัมบูรณ์แนวนอนและแนวตั้งตรงกลางใน CSS

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

มีมากกว่าที่มี10 เทคนิคกับตัวอย่าง ตอนนี้ก็ขึ้นอยู่กับคุณที่คุณต้องการ

ไม่ต้องสงสัยเลยว่าdisplay:table; display:table-Cellเป็นกลอุบายที่ดีกว่า

เทคนิคบางอย่างที่ดีมีดังต่อไปนี้:

เคล็ดลับที่ 1 - โดยการใช้ display:table; display:table-cell

HTML

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT
    </div>
  </div>
</div>

รหัส CSS

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

เคล็ดลับที่ 2 - โดยการใช้ display:inline-block

HTML

<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT
  </div>
</div>

รหัส CSS

.Center-Container.is-Inline {
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for Internet Explorer 9+ */
}

เคล็ดลับ 3 - โดยการใช้ position:relative;position:absolute

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER, <br/>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>

CSS:

.vertical {
   display: table-caption;
}

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

ถ้าคุณต้องการใช้กับmin-heightคุณสมบัติคุณต้องเพิ่ม CSS นี้ใน:

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}