จะจัดตำแหน่งองค์ประกอบที่แน่นอนให้อยู่กึ่งกลางได้อย่างไร


108

ฉันกำลังพยายามซ้อนผ้าใบสองผืนเข้าด้วยกันและทำให้เป็นผ้าใบสองชั้น

ฉันเห็นตัวอย่างที่นี่:

<div style="position: relative;">
 <canvas id="layer1" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

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

<div align="center">

ใครสามารถช่วยกรุณา?

คำตอบ:


229

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

position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;

คุณไม่จำเป็นต้องให้ความกว้างองค์ประกอบหรือไม่?
Gabriel Florit

1
ฉันไม่คิดว่ามันจำเป็นในกรณีนี้
Andrew

ลองใช้แล้วได้ผลควรทำเครื่องหมายว่าเป็นคำตอบที่ถูกต้อง
R Reveley

คุณสามารถใช้เปลี่ยนค่าซ้ายหรือขวาเพื่อย้ายวัตถุออกจากจุดศูนย์กลางได้ การใช้left: 80px;จะย้ายวัตถุ 40px (!) ไปทางขวาของจุดศูนย์กลาง
SPRBRN

5
หมายเหตุ: ใช้ได้เฉพาะเมื่อองค์ประกอบที่มีสไตล์มีความกว้างที่กำหนด (px หรือ%)
Johnny Wong

99

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

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

ตัวอย่าง:

*{
  margin:0;
  padding:0;
}
section{
  background:red;
  height: 100vh;
  width: 100vw;
}
div{  
  width: 80vw;
  height: 80vh;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<section>
  <div>
    <h1>Popup</h1>
  </div>
</section>


18

คุณลองใช้แล้วหรือยัง?:

left:50%;
top:50%;
margin-left:-[half the width] /* As pointed out on the comments by Chetan Sastry */

ไม่แน่ใจว่าใช้ได้ไหม แต่น่าลอง ...

การแก้ไขเล็กน้อย : เพิ่มส่วนขอบซ้ายตามที่ระบุไว้ในความคิดเห็นของ Chetan ...


ฉันได้ลองสิ่งนี้ แต่ผืนผ้าใบ "เริ่ม" จากตรงกลาง แต่ไม่ได้ "วาง" ไว้ตรงกลางของหน้าจอ มีการตั้งค่าด้านซ้าย: 50% แล้วเลื่อนผ้าใบไปทางซ้ายอีกครั้งหรือไม่?
PaulLing

2
@PaulLingmargin-left: <negative half the width>
Chetan S

สิ่งที่ Chetan พูด .. เอาชนะฉันให้ได้: P ฉันจะแก้ไขคำตอบของฉันสำหรับคนรุ่นต่อไป ...
Deleteman

ความกว้างของหน้าจอจะแตกต่างกันเมื่อวาง iPad ในแนวที่ต่างกัน
PaulLing

เขาหมายถึงความกว้างครึ่งหนึ่งขององค์ประกอบผ้าใบของคุณ ... นั่นจะทำให้ขอบซ้าย: -50px;
Deleteman



7

สิ่งที่คุณต้องทำคือ

ตรวจสอบให้แน่ใจว่า DIV หลักของคุณมีตำแหน่ง: ญาติ

และองค์ประกอบที่คุณต้องการอยู่ตรงกลางตั้งค่าความสูงและความกว้าง ใช้ CSS ต่อไปนี้

.layer {
    width: 600px; height: 500px;
    display: block;
    position:absolute;
    top:0;
    left: 0;
    right:0;
    bottom: 0;
    margin:auto;
  }
http://jsbin.com/aXEZUgEJ/1/

2
ทางออกเดียวที่เหมาะกับฉัน ผู้ปกครองถูกตั้งค่าเป็น flex, flex-grow & overflow เด็กอยู่ในตำแหน่งนอกกรอบสำหรับรูปภาพที่มีขนาดใหญ่กว่าระดับบนสุด ดูเหมือนจะไม่ได้ตระหนักถึงความกว้างของผู้ปกครอง ได้รับการแก้ไขแล้ว ขอบคุณมาก ๆ!
ไก่

0

ย้ายพาเรนต์ div ไปตรงกลางด้วย

left: 50%;
top: 50%;
margin-left: -50px;

ย้ายเลเยอร์ที่สองไปทับอีกชั้นด้วย

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