การวางตำแหน่งองค์ประกอบ <div> ตรงกลางหน้าจอ

134

ฉันต้องการจัดตำแหน่งองค์ประกอบ<div>(หรือ a <table>) ที่กึ่งกลางของหน้าจอโดยไม่คำนึงถึงขนาดหน้าจอ กล่าวอีกนัยหนึ่งช่องว่างด้านซ้ายบน "ด้านบน" และ "ด้านล่าง" ควรเท่ากันและช่องว่างด้านซ้ายบนด้านขวาและด้านซ้ายควรเท่ากัน ฉันต้องการทำสิ่งนี้ให้สำเร็จด้วย CSS เท่านั้น

ฉันได้ลองทำสิ่งต่อไปนี้แล้ว แต่ใช้งานไม่ได้:

 <body>
  <div style="top:0px; border:1px solid red;">
    <table border="1" align="center">
     <tr height="100%">
      <td height="100%" width="100%" valign="middle" align="center">
        We are launching soon!
      </td>
     </tr>
    </table>
  </div>
 </body>

หมายเหตุ:
เป็นวิธีที่ดีหาก<div>องค์ประกอบ (หรือ<table>) เลื่อนไปพร้อมกับเว็บไซต์หรือไม่ เพียงต้องการให้อยู่กึ่งกลางเมื่อหน้าโหลด

javascript css html

— สุมิตร
แหล่งที่มา

1

เป็นไปได้ที่ซ้ำกันของวิธีการจัดแนว <div> ตรงกลางของหน้า

— Purag

สวัสดี Purmou คำถามที่คุณพูดถึงหากต้องการวางตำแหน่งตรงกลางหน้าคือด้านซ้ายและด้านขวาเท่ากัน - ไม่เว้นช่องว่างด้านบนและด้านล่างเท่ากัน!

— sumit

1

อาจซ้ำกันได้ของวิธีที่ดีที่สุดในการจัด

— กึ่งกลาง

เป็นไปได้ที่จะซ้ำกันของวิธีจัดกึ่งกลาง div ใน div - แนวนอน?

— bjb568

201

วิธีง่ายๆหากคุณมีความกว้างและความสูงคงที่:

#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

โปรดอย่าใช้รูปแบบอินไลน์! นี่เป็นตัวอย่างการทำงานhttp://jsfiddle.net/S5bKq/

— Einstein
แหล่งที่มา

13

สำหรับผู้ที่ต้องการความสูงแบบไดนามิก: stackoverflow.com/questions/396145/…

— pulkitsinghal

1

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

— Sharky

@KatrinRaimond มันเป็นเหตุผลที่รู้จักกันดีเอกสารที่นี่stackoverflow.com/questions/2612483/...และนี่webdesign.about.com/od/css/a/aa073106.htm

— Alex

แต่การตั้งค่าบนสุดของ divElement ในหน่วย '%' ทำให้ divElement ใช้พื้นที่แนวตั้งเว้นแต่จะวาง divElement ไว้ในองค์ประกอบสัมพัทธ์

— sudip

คือตำแหน่ง: คงที่หรือตำแหน่ง: แน่นอน?

— Kurkula

151

ด้วยการเปลี่ยนแปลงที่ได้รับการสนับสนุนอย่างแพร่หลายในทุกวันนี้คุณสามารถทำได้โดยไม่ต้องทราบความกว้าง / ความสูงของป๊อปอัป

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

ง่าย! JSFiddle ที่นี่: http://jsfiddle.net/LgSZV/

อัปเดต:ตรวจสอบhttps://css-tricks.com/centering-css-complete-guide/สำหรับคำแนะนำที่ละเอียดถี่ถ้วนเกี่ยวกับการกำหนดศูนย์กลาง CSS เพิ่มเข้าไปในคำตอบนี้ดูเหมือนจะได้รับความสนใจมาก

— XwipeoutX
แหล่งที่มา

1

หากกำลังใช้เนื้อหาในป๊อปอัปการoverflow:autoเลื่อนจะถูกทำให้เมาใน IE9 :(

— joescii

2

ไม่แพร่หลายมากนัก IE8 ภาพนิ่ง20% ของส่วนแบ่งเบราว์เซอร์และไม่สนับสนุนมัน ดังนั้นใช้อันนี้สำหรับ IE9 + เท่านั้น

— fotanus

7

+1 เพื่อเป็นทางออกเดียวที่คุณไม่ต้องระบุความสูงและความกว้างหรือใช้ Javascript

— Jan Derk

@fotanus เมื่อนักพัฒนาหยุดสนับสนุน IE 9 <ผู้ใช้จะย้ายหรืออัปเดตเบราว์เซอร์ของตน

— Diego Vieira

@DIegoVieira น่าเสียดายที่นี่ไม่ใช่วิธีการทำงาน ดูโศกนาฏกรรมของคอมมอนส์ ดังนั้นผู้คนจะสนับสนุน IE8 ต่อไปเพราะไม่ต้องการเสียส่วนแบ่งนี้และผู้คนก็ใช้ต่อไปเพราะมันใช้งานได้

— fotanus

33

กำหนดความกว้างและความสูงแล้วคุณจะดี

div {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

หากคุณต้องการให้มิติข้อมูลองค์ประกอบมีความยืดหยุ่น (และไม่สนใจเบราว์เซอร์เดิม) ให้ไปที่คำตอบของXwipeoutX

— Erik Aigner
แหล่งที่มา

1

นี่เป็นคำตอบที่สะอาดและง่ายที่สุดและยังเหมาะกับอุปกรณ์เคลื่อนที่อีกด้วย +1

— สนิม

22

มันจะทำงานสำหรับวัตถุใด ๆ แม้ว่าคุณจะไม่ทราบขนาด:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

— luminousmen
แหล่งที่มา

17

ตอนนี้ง่ายขึ้นด้วย HTML 5 และ CSS 3:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body > div {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
            }
        </style>
    </head>
    <body>
        <div>
            <div>TODO write content</div>
        </div>
    </body>
</html>

— Daniel De León
แหล่งที่มา

12

หากคุณมีdivตำแหน่งที่แน่นอนคงที่เพียง 50% จากด้านบนและด้านซ้าย 50% และขอบด้านลบด้านบนและด้านซ้ายของครึ่งหนึ่งของความสูงและความกว้างตามลำดับ ปรับตามความต้องการของคุณ:

div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 300px;
    margin-left: -250px;
    margin-top: -150px;
}

— elclanrs
แหล่งที่มา

10

ใช้ดิ้น . ง่ายกว่ามากและจะทำงานไม่ว่าคุณจะdivมีขนาดเท่าใด:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

ขยายข้อมูลโค้ด

— Caner
แหล่งที่มา

3

ฉันจะทำใน CSS:

div.centered {
  position: fixed; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

จากนั้นใน HTML:

<div class="centered"></div>

— เอดูอาร์โดลาโกอากีลาร์
แหล่งที่มา

0

ลองดู

<table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;">
 <tr>
  <td>
   <div style="text-align: left; display: inline-block;">
    Your Html code Here
   </div>
  </td>
 </tr>
</table>

หรือนี่

<div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table">
 <div style="display: table-row">
  <div style="display: table-cell; vertical-align:middle;">
   <div style="text-align: left; display: inline-block;">
    Your Html code here
   </div>
  </div>
 </div>
</div>

— ต้าหลี่
แหล่งที่มา

0

หากมีใครกำลังมองหาวิธีแก้ปัญหา

ฉันพบสิ่งนี้

เป็นทางออกที่ดีที่สุดที่ฉันพบ!

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

http://dabblet.com/gist/2872671

หวังว่าคุณจะสนุก!

— Christopher Atwood
แหล่งที่มา

0

อีกวิธีที่มีความยืดหยุ่นเรื่องง่ายที่จะบล็อกการแสดงผลที่ศูนย์: การใช้การจัดตำแหน่งข้อความพื้นเมืองที่มีและline-heighttext-align

สารละลาย:

.parent {
    line-height: 100vh;        
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
}

และตัวอย่าง html:

<div class="parent">
  <div class="child">My center block</div>
</div>

เราจะให้div.parentเต็มหน้าจอและลูกของเขาเดียวจัดเป็นข้อความที่มีdiv.childdisplay: inline-block

ข้อดี:

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

ตัวอย่างง่ายๆใน JSFiddle: https://jsfiddle.net/k9u6ma8g

— Pavel Shorokhov
แหล่งที่มา

0

ทางเลือกอื่นที่ไม่ใช้ตำแหน่งสัมบูรณ์:
ฉันเห็นคำตอบที่แน่นอนของตำแหน่งมากมาย ฉันไม่สามารถใช้ตำแหน่งแน่นอนโดยไม่ทำลายอย่างอื่น สำหรับผู้ที่ทำไม่ได้เช่นกันนี่คือสิ่งที่ฉันทำ:
https://stackoverflow.com/a/58622840/6546317 (โพสต์เพื่อตอบคำถามอื่น)

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

— reddtoric
แหล่งที่มา

-2

ลองสิ่งนี้:

width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;

— user3423956
แหล่งที่มา

2

นี่เป็นเช่นเดียวกับคำตอบที่ยอมรับได้อย่างมีประสิทธิภาพ

— เมื่อ

ใช่ แต่ที่นี่ฉันจะอธิบายการทำงานของระยะขอบด้านบนและด้านซ้าย ... มีคนไม่ทราบเรื่องนี้ ....

— user3423956

1

จากนั้นก็เป็นเช่นเดียวกับคำตอบที่สอง

— เมื่อ