ฉันมีdivชุดเป็นdisplay:block( 90px heightและwidth) และฉันมีข้อความอยู่ข้างใน

ฉันต้องการข้อความที่จะจัดตำแหน่งในศูนย์ทั้งแนวตั้งและแนวนอน

ฉันได้ลองtext-align:centerแล้ว แต่มันไม่ได้ทำในแนวนอนดังนั้นฉันจึงพยายามvertical-align:middleแต่มันไม่ทำงาน

ความคิดใด ๆ

หากเป็นข้อความและ / หรือรูปภาพหนึ่งบรรทัดแสดงว่าทำได้ง่าย เพียงใช้:

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

แค่นั้นแหละ. หากสามารถมีหลายบรรทัดก็จะค่อนข้างซับซ้อน แต่มีการแก้ปัญหาใน http://pmob.co.uk/ มองหา "จัดแนวตั้ง"

เนื่องจากพวกเขามักจะแฮ็กหรือเพิ่ม div ที่ซับซ้อน ... ฉันมักจะใช้ตารางที่มีเซลล์เดียวทำ ... เพื่อทำให้มันง่ายที่สุด

อัพเดทสำหรับปี 2020:

หากคุณไม่ต้องการให้มันทำงานกับเบราว์เซอร์รุ่นก่อนหน้าเช่น Internet Explorer 10 คุณสามารถใช้ flexbox มันเป็นเรื่องที่ได้รับการสนับสนุนอย่างกว้างขวางโดยเบราว์เซอร์ที่สำคัญทั้งหมดในปัจจุบัน โดยทั่วไปจะต้องระบุคอนเทนเนอร์เป็นคอนเทนเนอร์แบบยืดหยุ่นพร้อมกับการจัดกึ่งกลางตามแกนหลักและแกนไขว้:

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

ในการระบุความกว้างคงที่สำหรับชายด์ซึ่งเรียกว่า "ไอเท็มเฟล็กต์":

#content {
  flex: 0 0 120px;
}

ตัวอย่าง: http://jsfiddle.net/2woqsef1/1/

ในการหดห่อเนื้อหามันง่ายยิ่งขึ้นเพียงแค่ลบflex: ...บรรทัดออกจากรายการเฟล็กซ์และมันจะถูกห่อโดยอัตโนมัติ

ตัวอย่าง: http://jsfiddle.net/2woqsef1/2/

ตัวอย่างข้างต้นได้รับการทดสอบบนเบราว์เซอร์หลัก ๆ รวมถึง MS Edge และ Internet Explorer 11

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

มีวิธีอื่นในการทำศูนย์กลาง: โดยไม่ได้ระบุcenterการกระจายในแกนหลักและแกนไขว้สำหรับเฟล็กซ์คอนเทนเนอร์ แต่ให้ระบุmargin: autoบนไอเท็มเฟล็กเพื่อใช้พื้นที่พิเศษทั้งหมดในทั้งสี่ทิศทางและการกระจายขอบเท่า ๆ กัน จะทำให้รายการ flex อยู่ตรงกลางในทุกทิศทาง ใช้งานได้ยกเว้นเมื่อมีรายการเฟล็กซ์หลายรายการ นอกจากนี้เทคนิคนี้ใช้กับ MS Edge ได้ แต่ไม่สามารถใช้กับ Internet Explorer 11 ได้

อัปเดตสำหรับ 2016/2017:

มันสามารถทำได้มากกว่าปกติtransformและใช้ได้ดีแม้ในเบราว์เซอร์รุ่นเก่าเช่น Internet Explorer 10 และ Internet Explorer 11 สามารถรองรับข้อความได้หลายบรรทัด:

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

ตัวอย่าง: https://jsfiddle.net/wb8u02kL/1/

วิธีย่อความกว้าง:

โซลูชันด้านบนใช้ความกว้างคงที่สำหรับพื้นที่เนื้อหา หากต้องการใช้ความกว้างที่หดห่อให้ใช้

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

ตัวอย่าง: https://jsfiddle.net/wb8u02kL/2/

หากต้องการการสนับสนุนสำหรับ Internet Explorer 10 Flexbox จะไม่ทำงานและวิธีการดังกล่าวข้างต้นและline-heightวิธีการดังกล่าวจะใช้งานได้ มิฉะนั้น flexbox จะทำงาน

เทคนิคทั่วไปของปี 2014:

• วิธีที่ 1 - transform translateX/ translateY:

  ตัวอย่างที่นี่ /ตัวอย่างเต็มหน้าจอ

  ในเบราว์เซอร์ที่รองรับ (ส่วนใหญ่) คุณสามารถใช้top: 50%/ ใช้left: 50%ร่วมกับ translateX(-50%) translateY(-50%)องค์ประกอบกลางแนวตั้ง / แนวนอนแบบไดนามิก

  .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
  }
  

• วิธีที่ 2 - วิธี Flexbox:

  ตัวอย่างที่นี่ /ตัวอย่างเต็มหน้าจอ

  ในเบราว์เซอร์ที่รองรับให้ตั้งค่าdisplayองค์ประกอบเป้าหมายflexและใช้align-items: centerสำหรับการจัดกึ่งกลางแนวตั้งและjustify-content: centerการจัดกึ่งกลางแนวนอน อย่าลืมเพิ่มคำนำหน้าผู้ขายสำหรับการสนับสนุนเบราว์เซอร์เพิ่มเติม ( ดูตัวอย่าง )

  html, body, .container {
      height: 100%;
  }
  .container {
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

• วิธีที่ 3 - table-cell/ vertical-align: middle:

  ตัวอย่างที่นี่ /ตัวอย่างเต็มหน้าจอ

  ในบางกรณีคุณจะต้องให้แน่ใจว่าhtml/ ความสูงขององค์ประกอบมีการตั้งค่าbody100%

  สำหรับการจัดตำแหน่งแนวตั้งองค์ประกอบหลักของwidth/ heightการและเพิ่ม100% display: tableแล้วสำหรับองค์ประกอบเด็กที่เปลี่ยนdisplayไปและเพิ่มtable-cellvertical-align: middle

  สำหรับการจัดกึ่งกลางแนวนอนคุณสามารถเพิ่มtext-align: centerการจัดกึ่งกลางข้อความและinlineองค์ประกอบลูก ๆ ก็ได้ หรือคุณอาจใช้margin: 0 autoสมมุติว่าองค์ประกอบนั้นเป็นblockระดับ

  html, body {
      height: 100%;
  }
  .parent {
      width: 100%;
      height: 100%;
      display: table;
      text-align: center;
  }
  .parent > .child {
      display: table-cell;
      vertical-align: middle;
  }
  

• วิธีที่ 4 - วางตำแหน่ง50%จากบนสุดด้วยการกระจัด:

  ตัวอย่างที่นี่ /ตัวอย่างเต็มหน้าจอ

  วิธีการนี้อนุมานว่าข้อความที่มีความสูงที่รู้จักกัน - 18pxในกรณีนี้ เพียงวางตำแหน่งองค์ประกอบ50%จากด้านบนสัมพันธ์กับองค์ประกอบหลัก ใช้ลบmargin-topค่าที่เป็นครึ่งหนึ่งขององค์ประกอบของความสูงที่รู้จักกันในกรณีนี้ -9px-

  html, body, .container {
      height: 100%;
  }
  .container {
      position: relative;
      text-align: center;
  }
  .container > p {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      margin-top: -9px;
  }
  

• วิธีที่ 5 - line-heightวิธีการ (ยืดหยุ่นน้อยที่สุด - ไม่แนะนำ):

  ตัวอย่างที่นี่

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

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

  .parent {
      height: 200px;
      width: 400px;
      text-align: center;
  }
  .parent > .child {
      line-height: 200px;
  }
  

วิธีที่ 4 และ 5 นั้นไม่น่าเชื่อถือที่สุด ไปกับหนึ่งใน 3 คนแรก

ใช้ flexbox / CSS:

<div class="box">
    <p>&#x0D05;</p>
</div>

CSS:

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

นำมาจากเคล็ดลับด่วน: วิธีที่ง่ายที่สุดในการจัดองค์ประกอบองค์ประกอบในแนวตั้งและแนวนอน

เพิ่มบรรทัดdisplay: table-cell;ลงในเนื้อหา CSS ของคุณสำหรับ div นั้น

เฉพาะเซลล์ตารางเท่านั้นที่รองรับvertical-align: middle;แต่คุณสามารถให้นิยาม [table-cell] แก่ div ...

ตัวอย่างสดอยู่ที่นี่: http://jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; // This says treat this element like a table cell
    vertical-align:middle; // Now we can center vertically like in a TD
}

ฉันมักจะใช้ CSS ต่อไปนี้สำหรับคอนเทนเนอร์เพื่อจัดกึ่งกลางเนื้อหาในแนวนอนและแนวตั้ง

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

ดูการทำงานได้ที่นี่: https://jsfiddle.net/yp1gusn7/

คุณสามารถลองใช้รหัสง่าย ๆ นี้:

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

.box{
  height: 90px;
  width: 90px;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="box">
  Lorem
</div>

ลิงค์ Codepen: http://codepen.io/santoshkhalse/pen/xRmZwr

มอบคลาส CSS นี้ให้กับ <div> เป้าหมาย:

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* Not necessary just to see the result clearly */
}

<div class="centered">This text is centered horizontally and vertically</div>

คุณสามารถใช้flexคุณสมบัติที่ผู้ปกครอง divและเพิ่มmargin:autoคุณสมบัติให้กับรายการลูก ๆ :

.parent {
    display: flex;
    /* You can change this to `row` if you want the items side by side instead of stacked */
    flex-direction: column;
}

/* Change the `p` tag to what your items child items are */
.parent p {
    margin: auto;
}

คุณสามารถดูตัวเลือกเพิ่มเติมได้flexที่นี่: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

วิธีที่ 1

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello, World!!
</div>

วิธีที่ 2

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

วิธีที่ 3

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

# Parent
{
  display:table;
}

# Child
{
  display: table-cell;
  width: 100%; // As large as its parent to center the text horizontally
  text-align: center;
  vertical-align: middle; // Vertically align this element on its parent
}

สิ่งนี้ใช้ได้กับฉัน (ผ่านการทดสอบ OK!):

HTML:

<div class="mydiv">
    <p>Item to be centered!</p>
</div>

CSS:

.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}

คุณสามารถเลือกค่าอื่น ๆ ได้มากกว่า 50% ตัวอย่างเช่น 25% ไปยังศูนย์ที่ 25% ของผู้ปกครอง

<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv {
        height: 450px;
        background: #f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <h1>Title</h1>
    </div>
  </body>
</html>

คุณสามารถลองวิธีการต่อไปนี้:

1. หากคุณมีคำเดียวหรือประโยคหนึ่งบรรทัดรหัสต่อไปนี้สามารถทำเคล็ดลับได้

   มีข้อความในแท็ก div และให้รหัส กำหนดคุณสมบัติต่อไปนี้สำหรับ id นั้น

   id-name {
     height: 90px;
     line-height: 90px;
     text-align: center;
     border: 2px dashed red;
   }

   หมายเหตุ:ตรวจสอบให้แน่ใจว่าคุณสมบัติความสูงบรรทัดนั้นเหมือนกับความสูงของการหาร

   ภาพ

   แต่ถ้าเนื้อหามีมากกว่าหนึ่งคำหรือหนึ่งบรรทัดก็ไม่ได้ผล นอกจากนี้ยังมีบางครั้งที่คุณไม่สามารถระบุขนาดของการหารใน px หรือ% (เมื่อการหารมีขนาดเล็กมากและคุณต้องการให้เนื้อหาอยู่ตรงกลาง)

2. เพื่อแก้ปัญหานี้เราสามารถลองการรวมกันของคุณสมบัติต่อไปนี้

   id-name {
     display: flex;
     justify-content: center;
     align-items: center;
     border: 2px dashed red;
   }

   ภาพ

   โค้ด 3 บรรทัดเหล่านี้ตั้งค่าเนื้อหาตรงกลางของการหาร (โดยไม่คำนึงถึงขนาดของจอแสดงผล) "จัดรายการ: ศูนย์"ช่วยในแนวตั้งตรงกลางขณะที่"ปรับเนื้อหา: ศูนย์"จะทำให้มันเป็นศูนย์กลางในแนวนอน

   หมายเหตุ: Flex ไม่สามารถใช้ได้ในทุกเบราว์เซอร์ ตรวจสอบให้แน่ใจว่าคุณเพิ่มคำนำหน้าผู้ขายที่เหมาะสมสำหรับการสนับสนุนเบราว์เซอร์เพิ่มเติม

GRID

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.box {
    width: 200px;
    height: 100px;
    background: red;
}

<div class="box center">My text</div>

การปรับความสูงของเส้นเพื่อให้ได้แนวแนวตั้ง

line-height: 90px;

นี่ควรเป็นคำตอบที่ถูกต้อง สะอาดและง่ายที่สุด:

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

ใช้สไตล์:

position: absolute;
top: 50%;
left: 0;
right: 0;

ข้อความของคุณจะอยู่กึ่งกลางโดยไม่คำนึงถึงความยาว

สิ่งนี้ใช้ได้กับฉัน:

.center-stuff{
    text-align: center;
    vertical-align: middle;
    line-height: 230px; /* This should be the div height */
}

สำหรับฉันนี่เป็นทางออกที่ดีที่สุด:

HTML:

 <div id="outer">  
     <img src="logo.png">
 </div>

CSS:

#outer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html> 

รหัสง่ายๆที่ใช้งานได้จริงสำหรับฉัน! เพียงหนึ่งบรรทัดและข้อความของคุณจะอยู่กึ่งกลางในแนวนอน

.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>

ผลลัพธ์มีลักษณะดังนี้:

กรุณาให้คะแนนคำตอบนี้ถ้ามันใช้งานได้เพียงเพื่อหาเวลาของ devs หาวิธีแก้ปัญหาที่ง่าย ขอบคุณ! :)

ลองตัวอย่างต่อไปนี้ ฉันได้เพิ่มตัวอย่างสำหรับแต่ละหมวดหมู่: แนวนอนและแนวตั้ง

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html>