div คงที่ตรงกลางพร้อมความกว้างแบบไดนามิก (CSS)

90

ฉันมี div ที่จะมี CSS นี้:

#some_kind_of_popup
{
    position: fixed;
    top: 100px;
    min-height: 300px;
    width: 90%;
    max-width: 900px;
}

ตอนนี้ฉันจะทำให้ div นี้อยู่กึ่งกลางได้อย่างไร ฉันสามารถใช้margin-left: -450px; left: 50%;แต่จะใช้ได้ก็ต่อเมื่อหน้าจอมีขนาด> 900 พิกเซล หลังจากนั้น (เมื่อหน้าต่างมีขนาด <900 พิกเซล) หน้าต่างจะไม่อยู่ตรงกลางอีกต่อไป

แน่นอนฉันสามารถทำสิ่งนี้กับ js บางประเภทได้ แต่มี "ถูกต้องกว่า" ในการทำเช่นนี้กับ CSS หรือไม่?

css html center

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

4

@ เลียม - ฉันไม่เห็นด้วยฉันคิดว่าคำถามนี้เป็นคำถามของตัวเอง คำถามเหล่านั้นไม่ได้ตอบคำถามนี้เกี่ยวกับการมี div ที่ไม่มีความกว้างคงที่อยู่ตรงกลาง

— Joshua M

สิ่งที่โจชัวพูดนั่นคือการรวม div ไว้ที่อื่น

— gubbfett

7

@Liam - ยิ่งไปกว่านั้นคุณไม่สามารถใช้ a margin: 0 autoบนposition: fixeddiv ได้ คุณอ่านคำถามแล้วหรือยัง?

— Joshua M

^ ไม่ ฉันเคยลองแล้วเช่นกัน : p

— gubbfett

3

@JoshuaM คำยืนยันของคุณไม่ถูกต้อง 100% ดูคำตอบของฉัน

— laconbass

226

คุณสามารถศูนย์fixedหรือabsoluteการตั้งค่าตำแหน่งองค์ประกอบrightและleftไป0แล้วmargin-leftและmargin-rightไปautoราวกับว่าคุณกำลังตรงกลางstaticองค์ประกอบในตำแหน่ง

#example {
    position: fixed;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 10em;
    width: 90%;
}

ดูตัวอย่างการทำงานกับซอนี้

— ลาคอนบาส
แหล่งที่มา

1

แค่พูดถึง ... ไม่ใช่เรื่องที่คาดไม่ถึง แต่มันล้มเหลวใน IE7 มันอยู่ในตำแหน่ง 0px จากซ้ายที่นี่ มันทำงานได้ดีแค่ไหนใน IE 8

— gubbfett

วิธีนี้ใช้ไม่ได้เมื่อความกว้างขององค์ประกอบมากกว่าความกว้างของหน้าจอ .. จะเป็นการดีที่จะให้มันใช้งานได้ในสถานการณ์นั้น

— andrewb

1

@andrewb คุณสามารถใช้มาร์จิ้นลบเท่า ๆ กันทั้งบนrightและleftอย่างน้อย a value >= witdth / 2ตามที่เห็นในjsfiddle.net/PvfFy/168แต่ไม่ใช่วิธีการที่สง่างามของ IMHO ฉันได้ทดสอบบนโครเมี่ยมเพื่อความสนุกสนานฉันไม่รู้ว่ามันจะใช้งานได้หรือไม่

— laconbass

5

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

— ปริศนา

4

คำถามบอกว่าความกว้างแบบไดนามิกนั่นคือปัญหาทั้งหมดคุณไม่สามารถเพิกเฉยต่อสิ่งนั้นได้

— Gil Epshtain

56

นี่เป็นอีกวิธีหนึ่งหากคุณสามารถใช้transformคุณสมบัติของ CSS3 ได้อย่างปลอดภัย:

.fixed-horizontal-center
{
    position: fixed;
    top: 100px; /* or whatever top you need */
    left: 50%;
    width: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

... หรือถ้าคุณต้องการให้ทั้งแนวนอนและแนวตั้งอยู่ตรงกลาง:

.fixed-center
{
    position: fixed;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

— Alan Bellows
แหล่งที่มา

5

ตราบใดที่เป็นเบราว์เซอร์รุ่นใหม่นี่คือไฟล์ ทางออกที่ดีที่สุดสำหรับคำตอบนี้! เพียงคนเดียวที่เป็นเหมือนจริง `ลอย: ศูนย์' ในการที่คุณสามารถคลิกรอบองค์ประกอบห่อและไม่ต้องติดมีวิธีการปลารอบ ๆ รักคำตอบนี้!

— SpYk3HH

1

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

— gnou

การใช้การแปลง CSS สามารถทำให้เกิดความเรียบบนข้อความได้มากกว่า ฉันได้รับพรมแดนที่ขี้ขลาดอันเป็นผลมาจากการเปลี่ยนแปลง

— Nathan K

1

มีแนวโน้มที่จะหดตัวเร็วเมื่อเปลี่ยนขนาดหน้าจอ (ขึ้นอยู่กับขนาดของส่วนงาน) ส่งผลให้มีผู้โดยสารจำนวนมากที่อยู่รอบขอบของส่วน

— Single Entity

7

<div id="container">
    <div id="some_kind_of_popup">
        center me
    </div>
</div>

คุณต้องห่อไว้ในภาชนะ นี่คือ css

#container{
    position: fixed;
    top: 100px;
    width: 100%;
    text-align: center;
}
#some_kind_of_popup{
    display:inline-block;
    width: 90%;
    max-width: 900px;  
    min-height: 300px;  
}

— Mathew Berg
แหล่งที่มา

ฉันชอบความคิดของคุณ div คงที่จะเป็นคอนเทนเนอร์สำหรับ div อื่นที่มีผลลัพธ์จริงหรือไม่ ฉันจะลองอันนี้!

— gubbfett

ในขณะที่ฉันชอบความเข้าใจง่ายของคำตอบของคุณ แต่ฉันไม่เห็นว่าจะอนุญาตให้รองรับ ie6 / 7 ได้อย่างไร

— Mathew Berg

1

@MathewBerg จุดดีเกี่ยวกับ IE6 / 7 ในกรณีนี้คำตอบของคุณควรได้ผลดีที่สุด นี่เป็น OT เล็กน้อย แต่โดยส่วนตัวแล้วฉันคิดว่านักพัฒนาไม่ควรใช้เวลาแก้ไขสิ่งต่างๆสำหรับ <= ie7 ฉันคิดว่าจริงๆแล้วนักพัฒนาควรบล็อกเบราว์เซอร์เหล่านั้นเพื่อบังคับให้ผู้คนและ บริษัท ที่มีระบบเก่าอัปเกรด มันยากแค่ไหนที่จะขายไอเดียนั้นให้กับลูกค้าที่จ่ายเงิน! ;)

— gubbfett

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

— Mathew Berg

1

สิ่งนี้ยังใช้ไม่ได้เนื่องจากคุณยังไม่สามารถคลิกผ่าน "คอนเทนเนอร์" ได้

— SpYk3HH

4

ซึ่งใช้งานได้โดยไม่คำนึงถึงขนาดของเนื้อหา

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

แหล่งที่มา: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

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

2

ระวัง: transform: translate(-50%, -50%);ทำให้ข้อความเบลอ (อย่างน้อยก็บน chrome)

— Jiří