จะวาง div ในแนวตั้งตรงกลางสำหรับเบราว์เซอร์ทั้งหมดได้อย่างไร?

1367

ฉันต้องการจัดกึ่งกลางdivแนวตั้งด้วย CSS ฉันไม่ต้องการตารางหรือ JavaScript แต่ใช้ CSS เท่านั้น ฉันพบวิธีแก้ไขปัญหาบางอย่าง แต่ทั้งหมดขาดการสนับสนุน Internet Explorer 6

<body>
    <div>Div to be aligned vertically</div>
</body>

ฉันจะจัดกึ่งกลางdivแนวตั้งในเบราว์เซอร์หลักทั้งหมดรวมถึง Internet Explorer 6 ได้อย่างไร

css  cross-browser  alignment  vertical-alignment  centering 
— Burak Erdem
แหล่งที่มา
25
@MarcoDemaio คุณไม่ชอบที่จะมีเลย์เอาต์tablesที่นี่อยู่ใช่ไหม?
— Chud37
14
@ Chud37: มันขึ้นอยู่กับสิ่งที่คุณต้องทำตารางสำหรับเลย์เอาต์มักจะไม่เอนกประสงค์และยาวในการพิมพ์โค๊ดด้วย css คุณสามารถเปลี่ยนเลย์เอาต์ 2 cols เป็นเลย์เอาท์ 3/4/5 sols แต่ในกรณีนี้ จะแตกต่างกันโดยใช้เคล็ดลับและเทคนิค css หลายอย่างสำหรับงานง่ายๆที่สามารถทำได้ด้วยตารางข้ามเบราว์เซอร์ที่สมบูรณ์แบบมันเหมือนกับการพยายามเข้าไปในบ้านของคุณผ่านหน้าต่างแทนที่จะใช้ประตู
— Marco Demaio
ในกรณีที่คนไม่สนใจการสนับสนุนเบราว์เซอร์รุ่นเก่า: davidwalsh.name/css-vertical-center
— Karolis Šarapnickis
1
css-vertical-center.comมีวิธีแก้ปัญหาบางอย่างพร้อมกับข้อมูลความเข้ากันได้ของเบราว์เซอร์
— EscapeNetscape
2
นี่คือวิธีการมากมายที่จะทำcss-tricks.com/centering-css-complete-guide
— Michael Yurin

คำตอบ:

1374

ด้านล่างเป็นโซลูชันครบวงจรที่ดีที่สุดที่ฉันสามารถสร้างเพื่อจัดวางกล่องเนื้อหาความสูงที่มีความกว้างคงที่และแนวนอน ได้รับการทดสอบและใช้งานกับ Firefox, Opera, Chrome และ Safari รุ่นล่าสุด

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

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

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>
ขยายตัวอย่างข้อมูล

ดูตัวอย่างการทำงานกับเนื้อหาแบบไดนามิก

ฉันสร้างเนื้อหาไดนามิกเพื่อทดสอบความยืดหยุ่นและรักที่จะรู้ว่าถ้าใครเห็นปัญหาใด ๆ กับมัน มันควรจะทำงานได้ดีสำหรับการวางซ้อนที่กึ่งกลางเช่นกัน - ไลท์บ็อกซ์ป๊อปอัป ฯลฯ

— Billbad
แหล่งที่มา
หากไม่มี DIV ด้านนอก "สัมบูรณ์" เนื้อหาใด ๆ ในหน้าเว็บก่อนที่จะผลักบล็อกทั้งหมดลง สิ่งนี้ทำให้ไม่ขึ้นกับเนื้อหาของหน้าอื่น
— Billbad
9
.outer {position:absolute;width:100%;height:100%}ไม่จำเป็นพวกเขามาที่นี่เพื่อสาธิต สิ่งที่เราต้องการคือdisplay:tableถ้ามีใครสับสนเหมือนฉัน
— gfaceless
ฉันสังเกตเห็นว่าสิ่งนี้ต้องการ 99% เพื่อหลีกเลี่ยงแถบเลื่อน สำคัญกว่านี้ใช้งานได้กับสองฝ่ายแรกเท่านั้นพูดเก็บ.outerและmiddleและไม่สนใจ.innerและสไตล์ ผมไม่ทราบว่าสิ่งที่เป็นจุดของmargin-left, margin-rightชุดอัตโนมัติตั้งแต่ที่ไม่ได้ศูนย์องค์ประกอบในแนวนอน ?? !!!
— user10089632
การลบwidth: 100%;และการเพิ่มmargin: 0 autoเพื่อ.outerช่วยให้ความกว้างของตัวแปรเช่นกัน
— โรโคโค
@ user10089632 ไม่ไม่ใช่ปัญหาเรื่องความกว้างหรือความสูง แต่เป็นตำแหน่ง top: 0; left 0;หายไปอย่างน้อยก็ใน Chrome ซึ่งตั้งค่าเริ่มต้นเป็น 1
— MichałWoliński
280

อีกหนึ่งฉันไม่เห็นในรายการ:

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}
  • ข้ามเบราว์เซอร์ (รวมถึง Internet Explorer 8 - Internet Explorer 10 โดยไม่แฮ็ก!)
  • ตอบสนองด้วยเปอร์เซ็นต์และ min- / max-
  • อยู่ตรงกลางโดยไม่คำนึงถึงช่องว่างภายใน (ไม่มีขนาดกล่อง!)
  • heightต้องประกาศ (ดูความสูงแปรผัน )
  • การตั้งค่าที่แนะนำoverflow: autoเพื่อป้องกันการรั่วไหลของเนื้อหา (ดูล้น)

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

— Yisela
แหล่งที่มา
7
สิ่งนี้ใช้งานได้สำหรับฉัน แต่ฉันต้องมีความกว้างคงที่และความสูงในโครเมี่ยมด้วยเหตุผลบางอย่าง
— Ryan Knell
1
ขอบคุณ. ฉันต้องการการแก้ไขที่ฉันไม่ต้องการคำนวณความสูงหรือความกว้างของ px และสิ่งนี้ใช้ได้อย่างสมบูรณ์แบบ
— GFoley83
8
ทางออกที่ดีโดยเฉพาะอย่างยิ่งเพราะคุณไม่ต้องการกองปกครอง
— Luca Steeb
1
นี่จะเป็นการยืดถ้าความสูงไม่คงที่นอกจากนั้นทางออกที่ดี
— Bart Burg
หากคุณมีความกว้างและความสูงที่ไม่ใช่ 100% ให้ใช้margin: auto;
— Charles L.
253

วิธีที่ง่ายที่สุดคือCSS 3 บรรทัดต่อไปนี้:

1) ตำแหน่ง: ญาติ;

2) ด้านบน: 50%;

3) การแปลง: translateY (-50%);

ต่อไปนี้เป็นตัวอย่าง :

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>
ขยายตัวอย่างข้อมูล

— DrupalFever
แหล่งที่มา
4
หมายเหตุ: ทำงานไม่ถูกต้องหากความสูงของ div ภายนอกตั้งค่าด้วย "min-height: 170px"
— Bart Burg
3
รบกวนดัชนี z
— ripper234
4
ไม่ทำงานเมื่อheightของนอกมีdiv แล้วเท่านั้นทำงานร่วมกับ100% position: absolute;
— Arch Linux Tux
1
ฉันได้พบวิธีแก้ปัญหานี้ที่อื่นก่อน แต่ความรุ่งโรจน์พิเศษสำหรับคำตอบนี้โดยเฉพาะสำหรับการพูดถึง-webkit-transformตัวแปรโดยเฉพาะอย่างยิ่งซึ่งฉันต้องทำให้วิธีการนี้ทำงานใน phantomjs ... ชั่วโมงสุดท้ายของการดิ้นรนขอบคุณ!
— drmrbrewer
2
นี่คือคำตอบที่ดีที่สุด มันง่ายอย่างไม่น่าเชื่อยุ่งกับงานและฟังก์ชั่นที่มีอยู่ในปริมาณน้อยที่สุดเท่าที่เคยมีมาใน IE9 ซึ่งไม่มีใครใช้อีกต่อไป ช่วยให้ได้รับผู้ชายคนนี้ upvotes อีก!
— Nick Steele
136

ที่จริงแล้วคุณต้องการสอง div เพื่อการจัดกึ่งกลางแนวตั้ง div ที่มีเนื้อหาจะต้องมีความกว้างและความสูง

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>
ขยายตัวอย่างข้อมูล

นี่คือผลลัพธ์

— Vadim Ovchinnikov
แหล่งที่มา
4
มันเป็นกลอุบายเก่า ๆ ... 50% แรกและยอดกำไรติดลบครึ่งหนึ่งของความสูงสำหรับ div ภายใน
— Manatax
34
มันสมมติว่าคุณมีความสูงคงที่สำหรับ div ไม่ทำงานเมื่อ div สามารถเปลี่ยนความสูงได้
— Andre Figueiredo
116

ตอนนี้โซลูชัน flexbox เป็นวิธีที่ง่ายมากสำหรับเบราว์เซอร์สมัยใหม่ดังนั้นฉันขอแนะนำให้คุณ:

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background:green;
}

body, html{
  height:100%;
}
<div class="container">
    <div>Div to be aligned vertically</div>
</div>
ขยายตัวอย่างข้อมูล

— Santosh Khalse
แหล่งที่มา
1
หากคุณมีnavbar, คุณสามารถปรับแต่งความสูงโดยใช้height: calc(100% - 55px)หรืออะไรก็ตามที่ความสูงของคุณnavbarมี
— เอเดรีย
ฉันยังต้องกำจัดระยะขอบ / ช่องว่างภายในออกจากร่างกาย
— เบ็น
floatทำงานได้ดีกับ ขอบคุณ
— Amir A. Shabani
โปรดทราบว่าสิ่งนี้อาจมีพฤติกรรมแปลก ๆ บนเบราว์เซอร์ซาฟารีมือถือรุ่นใหม่กว่า การใช้งานที่แนะนำแทนความสูงนั้นเป็นแบบยืดหยุ่นในคลาส .container
— Nine Magics
78

แก้ไข 2020: ใช้สิ่งนี้เฉพาะเมื่อคุณต้องการสนับสนุนเบราว์เซอร์รุ่นเก่าเช่น IE8 (ซึ่งคุณควรปฏิเสธที่จะทำ😉) ถ้าไม่ใช้ flexbox

นี่เป็นวิธีที่ง่ายที่สุดที่ฉันพบและฉันใช้มันตลอดเวลา ( สาธิต jsFiddle ที่นี่ )

ขอบคุณคริส Coyier จากเทคนิค CSS สำหรับบทความนี้

html, body{
  height: 100%;
  margin: 0;
}
.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%; 
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>
ขยายตัวอย่างข้อมูล

การสนับสนุนเริ่มต้นด้วย IE8

— Armel Larcier
แหล่งที่มา
ปฏิเสธการสนับสนุนเบราว์เซอร์รุ่นเก่าโซลูชันสำหรับฉันไม่ใช่ flexbox แต่เป็นระบบกริด มันน่ารำคาญนิดหน่อยสำหรับเนื้อหาของฉันในภาชนะที่เมื่อมันสูงเกินไปต้องแสดง scrollbar และเนื้อหาที่อยู่ตรงกลางก็หลุดออกจากพื้นที่เลื่อนด้วยวิธีอื่นทั้งหมด ในภาชนะฉันใช้: {display: grid; จัดเรียงรายการ: กึ่งกลาง; } หวังว่านี่จะช่วยใครซักคน
— tomasofen
63

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

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}
— ymakux
แหล่งที่มา
4
สิ่งนี้ทำงานได้ดีจริง ๆ หากคุณจำไว้ว่าองค์ประกอบของคอนเทนเนอร์ต้องมีความสูงโดยนัยหรือชัดเจน jsfiddle.net/14kt53un เล็กน้อย gotcha สำหรับผู้ที่ค่อนข้างใหม่สำหรับ CSS
— Martyn Shutt
6
จากคำตอบทั้งหมดนี่เป็นวิธีที่ง่ายที่สุด! ฉันหวังว่าคนอื่นจะเห็นคำตอบของคุณเช่นกัน! ขอบคุณ! โดยวิธีการ50%ทำงานสำหรับฉัน (ไม่-50%)
— รหัสที่
นั่นช่างเหลือเชื่อ หลังจากผ่านไปหลายชั่วโมงจากการค้นหาสิ่งนี้เหมาะสำหรับฉัน ฉันต้องใช้ translateY (50%) ฉันแน่ใจว่าทำไม แต่มันใช้งานได้ ในกรณีของฉันผู้ปกครองสร้างขึ้นโดย AEM Forms Engine และฉันสามารถควบคุมองค์ประกอบลูกบางอย่างเท่านั้น
— tarekahf
41

โซลูชัน Flexbox

html, body { margin: 0; height: 100%; }

body {
  display: flex;
  align-items: center;
}
<div>This is centered vertically</div>
ขยายตัวอย่างข้อมูล

— Reggie Pinkham
แหล่งที่มา
3
หมายเหตุ justify-content: centerจะจัดวางรายการในแนวนอนเช่นเดียวกัน
— Peter Berg
36

ไปยังศูนย์ div บนหน้าเว็บ, ตรวจสอบการเชื่อมโยงซอ

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>
ขยายตัวอย่างข้อมูล

อีกตัวเลือกหนึ่งคือการใช้กล่องดิ้นตรวจสอบการเชื่อมโยงซอ

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}
<div class="vh">
    <div>Div to be aligned vertically</div>
</div>
ขยายตัวอย่างข้อมูล

ตัวเลือกอื่นคือการใช้การแปลง CSS 3:

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>
ขยายตัวอย่างข้อมูล

— Nerdroid
แหล่งที่มา
3
@ArmelLarcier นั่นไม่ถูกต้อง หน่วยญาติเปอร์เซ็นต์%, emและrems ค่าสัมบูรณ์หรือค่าคงที่คือพิกเซลหรือจุด สิ่งที่คุณหมายถึงคือ "ใช้ได้กับความสูงที่ประกาศเท่านั้น" อย่างไรก็ตามวิธีนี้ที่ Moes อธิบายต้องการความสูงเมื่อคุณประกาศในหน่วยสัมพัทธ์เปอร์เซ็นต์จะดีที่สุดไม่ว่าเนื้อหาจะอยู่ใน DIV กึ่งกลางที่ DIV จะขยายในแนวตั้งเพื่อให้พอดีกับเนื้อหา นั่นคือความงามของวิธีนี้ ข้อดีอีกอย่างก็คือวิธีนี้ใช้ได้กับ IE8 / 9/10 ในกรณีที่บางคนยังต้องการรองรับเบราว์เซอร์เหล่านั้น
— Ricardo Zea
@ricardozea ฉันไม่ได้ตั้งใจเล่นดื้อ แต่การบอกว่า div ที่อยู่กึ่งกลางนั้นจะขยายตัวในแนวดิ่ง ลองมัน. ฉันรู้ว่าเมื่อฉันพูดความสูงต้อง "คงที่" นั่นไม่ใช่คำที่ถูกต้อง แท้จริงแล้วมันเกี่ยวข้องกับพ่อแม่ของมัน อย่างไรก็ตามฉันคิดว่าวิธีการของ Chris Coyer มีเหตุผลมากกว่านี้ดูคำตอบของฉัน stackoverflow.com/a/21919578/1491212 มันเข้ากันได้กับ IE8 และทำงานกับองค์ประกอบที่ไม่มีมิติที่ระบุ
— Armel Larcier
1
@ArmelLarcier ทุกอย่างดี ไม่ผิดพี่ ลองใช้: codepen.io/shshaw/pen/gEiDt - เพิ่มย่อหน้าลงในกล่องสีเขียว;] ได้รับมันใช้ Modernizr เพื่อให้บรรลุผล แต่ทั้งหมดก็ทำได้ ฉันเห็นคำตอบของคุณและ CSS-Tricks.com ก็โพสต์ด้วยเช่นกัน แต่วิธีการนั้นไม่ได้ทำให้ฉันมีความสุขมันใช้มาร์กอัปพิเศษและ CSS ก็ละเอียดเกินไป ฉันคิดว่าทางออกที่ดีที่สุดคือใช้ flexbox หรือtransform: translate(-50%, -50%);เทคนิค สำหรับ IE8 ฉันจะปล่อยให้มันอยู่ในแนวเดียวกัน / ตรงกลางแล้วเดินหน้าต่อไป
— Ricardo Zea
1
@ricardozea codepen ที่คุณเชื่อมโยงไปใช้วิธี "display: table" และมาร์กอัปเพิ่มเติมดังนั้นฉันจึงไม่แปลกใจ อย่างไรก็ตาม +1 ประโยคสุดท้ายของคุณ
— Armel Larcier
23

ทางออกที่ง่ายที่สุดอยู่ด้านล่าง:

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
  border:1px solid #000;
}
.inner-div{
  margin: auto;
  text-align:center;
  border:1px solid red;
}
<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>
ขยายตัวอย่างข้อมูล

— Varsha Dhadge
แหล่งที่มา
2
อันที่ง่ายที่สุดก็จริง :) แม้ว่าฉันจะต้องกำหนดรูปแบบให้กับ div-div แทนที่จะเป็นร่างกาย
— baburao
21

น่าเสียดาย - แต่ไม่น่าแปลกใจ - การแก้ปัญหามีความซับซ้อนมากกว่าที่ใคร ๆ ก็อยากให้เป็น โชคไม่ดีที่คุณจะต้องใช้ div เพิ่มเติมรอบ div ที่คุณต้องการให้อยู่กึ่งกลางแนวตั้ง

สำหรับเบราว์เซอร์ที่เป็นไปตามมาตรฐานเช่น Mozilla, Opera, Safari ฯลฯ คุณต้องตั้ง div ด้านนอกให้แสดงเป็นตารางและ div ด้านในจะแสดงเป็นเซลล์ตารางซึ่งสามารถอยู่กึ่งกลางแนวตั้งได้ สำหรับ Internet Explorer คุณจะต้องวางตำแหน่ง div ภายในอย่างภายใน div นอกแล้วระบุด้านบนเป็น50% หน้าต่อไปนี้อธิบายเทคนิคนี้ได้ดีและให้ตัวอย่างโค้ดด้วย:

นอกจากนี้ยังมีเทคนิคการทำศูนย์กลางแนวตั้งโดยใช้ JavaScript การจัดแนวเนื้อหาด้วย JavaScript & CSSแสดงให้เห็นถึงแนวตั้ง

— sids
แหล่งที่มา
20

หากมีคนสนใจ Internet Explorer 10 (และใหม่กว่า) เท่านั้นให้ใช้flexbox:

.parent {
    width: 500px;
    height: 500px;
    background: yellow;

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

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

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.centered {
    width: 100px;
    height: 100px;
    background: blue;
}
<div class="parent">
    <div class="centered"></div>
</div>
ขยายตัวอย่างข้อมูล

การสนับสนุน Flexbox: http://caniuse.com/flexbox

— bravedick
แหล่งที่มา
Android <4.4 ไม่รองรับalign-items: center;!
— André Fiedler
จริงๆแล้วมันรองรับ align-items: center; caniuse.com/#search=align-items
— t.mikael.d
@ t.mikael.d คุณอาจต้องการดูตารางนั้นให้ละเอียดยิ่งขึ้น สำหรับ Android <4.4 จะระบุว่า "รองรับเฉพาะข้อมูลจำเพาะ flexbox แบบเก่าและไม่รองรับการตัดคำ"
— นาธานออสมัน
15

flexboxวิธีการที่ทันสมัยไปยังศูนย์องค์ประกอบในแนวตั้งจะใช้

คุณต้องมีผู้ปกครองในการตัดสินใจความสูงและเด็กไปที่ศูนย์

ตัวอย่างด้านล่างจะแบ่ง div ไปที่กึ่งกลางภายในเบราว์เซอร์ของคุณ สิ่งที่สำคัญ (ในตัวอย่างของฉัน) คือการตั้งค่าheight: 100%ไปbodyและhtmlแล้วmin-height: 100%ในคอนเทนเนอร์ของคุณ

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}
<div id='center_container'>
  <div id='center'>I am center.</div>
</div>
ขยายตัวอย่างข้อมูล

— Marwelln
แหล่งที่มา
14

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

หากคุณไม่สนใจ Internet Explorer 6 และ 7 คุณสามารถใช้เทคนิคที่เกี่ยวข้องกับสองคอนเทนเนอร์

ภาชนะด้านนอก:

  • ควรมี display: table;

ภาชนะภายใน:

  • ควรมี display: table-cell;
  • ควรมี vertical-align: middle;

กล่องเนื้อหา:

  • ควรมี display: inline-block;

คุณสามารถเพิ่มเนื้อหาใด ๆ ที่คุณต้องการลงในกล่องเนื้อหาโดยไม่ต้องคำนึงถึงความกว้างหรือความสูงของมัน!

การสาธิต:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

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

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>
ขยายตัวอย่างข้อมูล

ดูซอนี้ !

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

หากคุณต้องการจัดกึ่งกลางทั้งแนวนอนและแนวตั้งคุณต้องมีสิ่งต่อไปนี้

ภาชนะภายใน:

  • ควรมี text-align: center;

กล่องเนื้อหา:

  • ควรปรับการจัดแนวข้อความในแนวนอนเป็นตัวอย่างtext-align: left;หรือtext-align: right;ถ้าคุณไม่ต้องการให้ข้อความอยู่กึ่งกลาง

การสาธิต:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
         Malcolm in the Middle
     </div>
   </div>
</div>
ขยายตัวอย่างข้อมูล

ดูซอนี้ !

— John Slegers
แหล่งที่มา
13 

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */    
}

.vertical {
  position: absolute;
  top: 50%;
  //left: 0;
  transform: translate(0, -50%); /* (x, y) => position */
}

.horizontal {
  position: absolute;
  //top: 0;
  left: 50%;
  transform: translate(-50%, 0); /* (x, y)  => position */
}

div {
  padding: 1em;
  background-color: grey; 
  color: white;
}  
<body>
  <div class="vertical">Vertically left</div>
  <div class="horizontal">Horizontal top</div>
  <div class="center">Vertically Horizontal</div>  
</body>
ขยายตัวอย่างข้อมูล

ที่เกี่ยวข้อง: จัดกึ่งกลางภาพ

— antelove
แหล่งที่มา
10

นี่คือที่ที่ฉันไปเสมอเมื่อฉันต้องกลับมาที่ปัญหานี้

สำหรับผู้ที่ไม่ต้องการกระโดด:

  1. ระบุคอนเทนเนอร์หลักเป็นหรือposition:relativeposition:absolute
  2. ระบุความสูงคงที่บนคอนเทนเนอร์ลูก
  3. ตั้งค่าposition:absoluteและtop:50%บนคอนเทนเนอร์ลูกเพื่อย้ายด้านบนลงไปตรงกลางของพาเรนต์
  4. ตั้งค่าระยะขอบ -: - yy โดยที่ yy คือครึ่งหนึ่งของความสูงของคอนเทนเนอร์เด็กเพื่อชดเชยรายการ

ตัวอย่างของสิ่งนี้ในรหัส:

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>
— Ninx
แหล่งที่มา
9

การใช้คุณสมบัติยืดหยุ่นของ CSS

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}
<div class="parent">
    <div class="child"></div>
</div>
ขยายตัวอย่างข้อมูล

หรือโดยการใช้display: flex;และmargin: auto;

แสดงตัวอย่างโค้ด

แสดงศูนย์ข้อความ

แสดงตัวอย่างโค้ด

ใช้เปอร์เซ็นต์ (%) ความสูงและความกว้าง

แสดงตัวอย่างโค้ด

— Deepu Reghunath
แหล่งที่มา
8

ฉันเขียน CSS นี้และจะทราบข้อมูลเพิ่มเติมโปรดไปผ่าน: บทความนี้กับสิ่งที่จัดแนวตั้งที่มีเพียง 3 บรรทัดของ CSS

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}
— Sanjib Debnath
แหล่งที่มา
1
การแปลง CSS สามารถทำให้เกิดการบิดเบือนในข้อความและเส้นขอบ (เมื่อผลลัพธ์ทางคณิตศาสตร์เป็นพิกเซลเศษส่วน)
— นาธาน K
5

สำหรับผู้มาใหม่โปรดลอง 

display: flex;
align-items: center;
justify-content: center;
— Usman I
แหล่งที่มา
1
โปรดเพิ่มStack Snippet ที่แสดงว่าโค้ด CSS นี้จัดแนวตั้งdivอย่างไร
— Monkey Heretic
งานนี้ด้วย <div style="display:flex"><div style="margin:auto">Inner</div></div>
— idrisadetunmbi
ฉันเจอคำอธิบายที่ยอดเยี่ยมของการจัดเรียงรายการและปรับเนื้อหา ต้องอ่าน: stackoverflow.com/questions/42613359/…
— Usman I
4

คำตอบจาก Billbad ใช้งานได้กับความกว้างคงที่ของ.innerdiv เท่านั้น โซลูชันนี้ใช้งานได้สำหรับความกว้างแบบไดนามิกโดยการเพิ่มแอตทริบิวต์text-align: centerให้กับ.outerdiv

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>
ขยายตัวอย่างข้อมูล

— Ruwen
แหล่งที่มา
! ที่น่าสนใจ ฉันใช้เทคนิคที่เกือบเหมือนกัน! -> stackoverflow.com/questions/396145/…
— John Slegers
4

โค้ดสามบรรทัดที่ใช้transformงานได้จริงบนเบราว์เซอร์สมัยใหม่และ Internet Explorer:

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

ฉันกำลังเพิ่มคำตอบนี้เนื่องจากพบความไม่สมบูรณ์ในคำตอบก่อนหน้านี้ (และ Stack Overflow จะไม่อนุญาตให้ฉันแสดงความคิดเห็น)

  1. 'ตำแหน่ง' ที่เกี่ยวข้องจะทำให้สไตล์ที่ยุ่งเหยิงถ้า div ปัจจุบันอยู่ในร่างกายและไม่มี div div อย่างไรก็ตาม 'คงที่' ดูเหมือนว่าจะใช้งานได้ แต่เห็นได้ชัดว่ามันแก้ไขเนื้อหาในศูนย์กลางของวิวพอร์ต ตำแหน่ง: ญาติ

  2. ฉันใช้สไตล์นี้เพื่อจัดวาง div ที่ซ้อนกันและพบว่าใน Mozilla องค์ประกอบทั้งหมดใน div ที่ถูกแปลงนี้ได้สูญเสียขอบด้านล่าง อาจเป็นปัญหาการเรนเดอร์ แต่การเพิ่มการเติมที่น้อยที่สุดให้กับบางการแสดงผลถูกต้อง Chrome และ Internet Explorer (น่าประหลาดใจ) ที่แสดงผลกล่องโดยไม่จำเป็นต้องมีช่องว่างภายใน โมซิลล่าที่ไม่มีแผ่นภายใน โมซิลล่ากับแพ็ดดิ้ง

— MandarK
แหล่งที่มา
3

ลิงค์ต่อไปนี้นำเสนอวิธีการง่ายๆเพียง 3 บรรทัดใน CSS ของคุณ:

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

เครดิต : เซบาสเตียนEkström

ฉันรู้ว่าคำถามมีคำตอบอยู่แล้ว แต่ฉันเห็นอรรถประโยชน์ในลิงก์เพื่อความเรียบง่าย

— Hicaro
แหล่งที่มา
3

ไม่ตอบรับความเข้ากันได้ของเบราว์เซอร์ แต่ต้องพูดถึง Grid ใหม่และคุณสมบัติ Flexbox ที่ไม่ใหม่

ตะแกรง

จาก: Mozilla - Grid Documentation - จัดแนว Div ในแนวตั้ง

การสนับสนุนเบราว์เซอร์: การสนับสนุนเบราว์เซอร์กริด

CSS:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML:

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

flexbox

การสนับสนุนเบราว์เซอร์: การสนับสนุนเบราว์เซอร์ Flexbox

CSS:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
— ctekk
แหล่งที่มา
3

ฉันคิดว่าโซลูชันที่มั่นคงสำหรับเบราว์เซอร์ทั้งหมดโดยไม่ใช้ flexbox - "align-items: center;" คือการรวมกันของจอแสดงผล: ตารางและแนวตั้งแนวตั้ง: กลาง;

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* optional */
    height: 100%; /* optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

‣demo: https://jsfiddle.net/6m640rpp/

— Martin Wantke
แหล่งที่มา
2

ฉันทำกับสิ่งนี้ (เปลี่ยนความกว้างความสูงระยะขอบและซ้ายตามลำดับ):

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class="wrapper"> -- Content -- </div>
— Netuddki
แหล่งที่มา
นั่นเป็นสิ่งที่ดีถ้าคุณรู้ว่าความกว้าง / ความสูงของ DIV ที่คุณพยายามจัดให้อยู่ตรงกลาง นี่ไม่ใช่คำถามที่ถาม
— egr103
2

เนื้อหาสามารถอยู่กึ่งกลางได้อย่างง่ายดายโดยใช้ flexbox รหัสต่อไปนี้แสดง CSS สำหรับคอนเทนเนอร์ที่เนื้อหาจะต้องอยู่กึ่งกลาง:

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

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

    align-items: center;
}
— Mahendra Liya
แหล่งที่มา
2

โดยเฉพาะอย่างยิ่งสำหรับผู้ปกครอง div ที่มีความสูง (ไม่ทราบ) ความสูงการจัดกึ่งกลางในโซลูชันที่ไม่รู้จักใช้งานได้ดีสำหรับฉัน มีตัวอย่างโค้ดที่ดีจริงๆในบทความ

มีการทดสอบใน Chrome, Firefox, Opera และ Internet Explorer

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>
ขยายตัวอย่างข้อมูล

— Ruwen
แหล่งที่มา
2

แค่ทำมัน: เพิ่มคลาสที่div:

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

และอ่านบทความนี้เพื่อขอคำอธิบาย หมายเหตุ: Heightจำเป็น

— Anshul
แหล่งที่มา
2

มีเคล็ดลับที่ฉันค้นพบเมื่อเร็ว ๆ นี้: คุณต้องใช้top 50%& จากนั้นคุณทำtranslateY(-50%)

.outer-div {
  position: relative;
  height: 150px;
  width: 150px;
  background-color: red;
}

.centered-div {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: white;
}
<div class='outer-div'>
  <div class='centered-div'>
    Test text
  </div>
</div>
ขยายตัวอย่างข้อมูล

— Melchia
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.