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

439

ฉันต้องการทำposition: fixed;กล่องป๊อปอัพที่อยู่กึ่งกลางหน้าจอด้วยความกว้างและความสูงแบบไดนามิก ฉันใช้margin: 5% auto;สำหรับสิ่งนี้ หากไม่มีposition: fixed;มันก็จะปรับแนวนอนให้อยู่กึ่งกลาง หลังจากเพิ่มposition: fixed;มันยังไม่ได้อยู่ตรงกลางในแนวนอน

นี่คือชุดที่สมบูรณ์:

.jqbox_innerhtml {
    position: fixed;
    width: 500px;
    height: 200px;
    margin: 5% auto;
    padding: 10px;
    border: 5px solid #ccc;
    background-color: #fff;
}

<div class="jqbox_innerhtml">
    This should be inside a horizontally
    and vertically centered box.
</div>

ขยายตัวอย่างข้อมูล

ฉันจะจัดกึ่งกลางกล่องนี้ในหน้าจอด้วย CSS ได้อย่างไร

css css-position centering

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

606

โดยทั่วไปคุณต้องตั้งค่าtopและleftเพื่อจัด50%กึ่งกลางมุมซ้ายบนของ div คุณต้องตั้งค่าmargin-topและmargin-leftเป็นครึ่งลบของความสูงและความกว้างของ div เพื่อเลื่อนจุดกึ่งกลางไปทางกึ่งกลางของ div

ดังนั้นหากมี<!DOCTYPE html>(โหมดมาตรฐาน) สิ่งนี้ควรทำ:

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

หรือถ้าคุณไม่สนใจเกี่ยวกับการจัดกึ่งกลางในแนวตั้งและเบราว์เซอร์เก่าเช่น IE6 / 7 คุณสามารถเพิ่มleft: 0และright: 0องค์ประกอบที่มี a margin-leftและmargin-rightของautoแทนเพื่อให้องค์ประกอบตำแหน่งคงที่ที่มีความกว้างคงที่รู้ตำแหน่งด้านซ้ายและ ออฟเซ็ตที่เหมาะสมเริ่มต้น ในกรณีของคุณดังนี้:

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

อีกครั้งสิ่งนี้ใช้ได้เฉพาะใน IE8 + หากคุณสนใจเกี่ยวกับ IE และศูนย์นี้จะไม่อยู่ในแนวตั้ง

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

8

ผมพบว่าเคล็ดลับในการที่css-tricks.com/... แต่เมื่อฉันเปลี่ยนความกว้างและความสูงมันไม่ได้ย้ายศูนย์ ใช่ฉันควรเปลี่ยนระยะขอบซ้ายและบนสุดเมื่อเปลี่ยนความสูงและความกว้าง

— saturngod

2

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

— Groxx

3

Groxx ฉันคิดว่าคุณสามารถใส่แถบเลื่อนภายใน div ใน pop up โดยใช้คุณสมบัติล้น

— David Winiecki

1

นอกจากนี้สำหรับสิ่งนี้คุณต้องทราบความกว้างขององค์ประกอบ

— เฮ็กเตอร์ Ordonez

2

อา. อืมถ้าเป็นเช่นนั้นฉันหมายถึงแน่นอนขนาดเบราว์เซอร์จะเป็นแบบไดนามิกไม่แน่ใจว่าทำไมเป็นเช่นนั้น แต่ฉันคิดว่าเขาหมายถึงว่าขนาดป๊อปอัปต้องเป็นแบบไดนามิก นั่นคือกรณีสำหรับฉันดังนั้นฉันใช้การแปลง: แปล (-50%, -50%); ใช้งานได้ดียกเว้นใน IE8

— คืน

324

ฉันต้องการให้กล่องป๊อปอัปอยู่กึ่งกลางหน้าจอที่มีความกว้างและความสูงแบบไดนามิก

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

อัปเดตตัวอย่าง

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

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

อัปเดตตัวอย่าง

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

คุณอาจต้องการเพิ่มคุณสมบัตินำหน้าของผู้ขายเพิ่มเติมด้วย (ดูตัวอย่าง)

— Josh Crozier
แหล่งที่มา

1

ฉันใช้วิธีนี้ในการจัดกึ่งกลางภาพในตำแหน่งที่กำหนดในแนวนอนซึ่งความกว้างมากกว่าความกว้างของหน้าต่างและทำงานได้ดีใน Firefox, Chrome, IE 11 และ Edge รุ่นปัจจุบัน

— jelhan

1

ในการทดสอบของฉันมันใช้งานได้ดีมาก (หลังคำนำหน้า), Win10 Edge 14, Win7 IE9 +, Win10 Chrome, OSX Chrome, iPad4 Chrome & Safari, Android 4.4+ Chrome ความล้มเหลวสำหรับฉันคือ Android 4.0 ที่การแปลไม่ได้เกิดขึ้น

— danjah

2

@ahnbizcad ซึ่งทำงานในเบราว์เซอร์เดสก์ท็อปเช่น Chrome 61, Safari 11 และ FireFox 65 แต่ไม่ใช่ใน Chrome 61 บน Android 6 คำตอบที่ยอมรับใช้งานได้กับเบราว์เซอร์ทั้งหมด

— Erik Barke

5

สิ่งนี้ทำให้ภาพเบลอใน Chrome

— Tomasz P. Szynalski

1

ยังไงก็เถอะวิธีเดียวที่ทำงานได้ดีในทุกเบราว์เซอร์ด้วย img ของฉัน ขอบคุณมัด!

— Kugelfisch

136

หรือเพียงเพิ่มleft: 0และเพิ่มright: 0CSS ดั้งเดิมของคุณซึ่งทำให้มันทำงานคล้ายกับองค์ประกอบที่ไม่คงที่เป็นประจำและเทคนิคการเพิ่มระยะขอบอัตโนมัติตามปกติทำงาน:

.jqbox_innerhtml
{
  position: fixed;
  width:500px;
  height:200px;
  background-color:#FFF;
  padding:10px;
  border:5px solid #CCC;
  z-index:200;
  margin: 5% auto;
  left: 0;
  right: 0;
}

โปรดทราบว่าคุณต้องใช้ HTML ที่ถูกต้อง (X) DOCTYPEเพื่อให้ทำงานได้อย่างถูกต้องใน IE (ซึ่งแน่นอนว่าคุณควรมีอยู่แล้ว .. !)

— จะเพรสคอตต์
แหล่งที่มา

2

ในสิ่งที่รู้สึก? องค์ประกอบหลักคือองค์ประกอบร่างกายซึ่งไม่มีพรมแดน หากคุณเพิ่มคุณสมบัติเส้นขอบให้กับร่างกาย (?!) แล้วแน่ใจว่ามันจะได้รับผลกระทบเช่นเดียวกับเทคนิค 50% ที่ฉันจินตนาการ ฉันรับรองว่ามันใช้งานได้ดีกับพารามิเตอร์ที่กำหนดเพียงตรวจสอบในเบราว์เซอร์ทุกตัวที่ฉันมีประโยชน์และมีประโยชน์เพิ่มเติมโดยไม่ขึ้นอยู่กับความกว้างขององค์ประกอบ

— Will Prescott

5

ทั้งหมดที่ฉันทำคือการเพิ่ม 2 คุณสมบัติเหล่านั้นและ doctype ไปที่ HTML ตัวอย่างของ OP อย่างไรก็ตามในการทดสอบเพิ่มเติมดูเหมือนว่า IE7 (หรือ 8 ในโหมดที่เข้ากัน) เป็นปัญหา - ดูเหมือนว่ามันจะไม่เคารพมูลค่าของrightทรัพย์สินหากleftมีการตั้งค่า! ( msdn.microsoft.com/en-us/library/…ตั้งข้อสังเกตว่าleftและrightสนับสนุน "บางส่วน" ใน IE7 เท่านั้น) ตกลงฉันยอมรับวิธีนี้คือไม่ดีถ้าสนับสนุน IE7 เป็นสิ่งสำคัญ แต่เป็นเคล็ดลับที่ดีที่จะจำสำหรับอนาคต :)

— วิลเพรสคอตต์

7

นี่ควรเป็นคำตอบที่ยอมรับได้ ฉันมีตำแหน่งคงที่สองตำแหน่งหนึ่งสำหรับหน้ากากทึบอีกตำแหน่งหนึ่งสำหรับคำกริยา นี่เป็นวิธีเดียวที่ฉันสามารถจัดตำแหน่งโมดัลให้อยู่กึ่งกลางหน้าจอได้ คำตอบที่ยอดเยี่ยมใครจะมีความคิด?

— Chris Hawkes

3

ฉันเห็นด้วยนี่ควรเป็นคำตอบที่ยอมรับได้ มันทำงานได้อย่างสมบูรณ์แบบในการออกแบบที่ตอบสนองเช่นกันเพราะมันไม่ได้ขึ้นอยู่กับความกว้าง

— เฮ็กเตอร์ Ordonez

7

ฉันขอแนะนำให้ทำให้คำตอบง่ายขึ้นเนื่องจาก css บางตัวเกี่ยวข้องกับ OP เท่านั้น ทั้งหมดที่คุณต้องการคือตำแหน่ง: แก้ไข; ซ้าย: 0; ขวา: 0; กำไรขั้นต้น: 0 อัตโนมัติ .

— Hector Ordonez

23

เพิ่มคอนเทนเนอร์เช่น:

div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

จากนั้นใส่กล่องของคุณลงใน div นี้จะทำงาน

— Romulus Urakagi Ts'ai
แหล่งที่มา

"การจัดแนวข้อความ: กึ่งกลาง" ไม่ทำงานสำหรับฉันในการจัดวาง div ภายใน

— นิมา

2

กล่องภายในจำเป็นต้องdisplay: inline-blockใช้เพื่อให้ทำงานได้ (ค่าที่แสดงอื่น ๆ อาจใช้งานได้เช่นtable.)

— Brilliand

วิธีการที่ดีกว่าที่จะ css ที่กล่าวมาข้างต้นจะมีการเพิ่มmargin:auto;และการเปลี่ยนแปลงความกว้างหรือwidth:50% width:400pxจากนั้นเนื้อหาสามารถเป็นข้อความแบบตรงองค์ประกอบบล็อกหรือองค์ประกอบแบบอินไลน์

— Joshua Burns

20

เพียงเพิ่ม:

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;

— ผมบ๊อบ
แหล่งที่มา

1

สิ่งนี้ไม่ได้ผลposition: fixedซึ่งเป็นคำถามที่เกี่ยวกับ หากฉันผิดโปรดแก้ไขคำตอบของคุณเพื่อรวมข้อมูลโค้ดที่รันได้

— Flimm

1

มันใช้งานได้ดีกับการแก้ไขตำแหน่ง

— Phuhui

1

มันทำงานร่วมกับposition: fixedให้การตั้งค่าmax-widthหรือwidthองค์ประกอบ

— Js Lim

7

#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

ภายในมันสามารถเป็นองค์ประกอบใด ๆ ที่มีความกว้าง diffenet ความสูงหรือไม่มี ทั้งหมดอยู่กึ่งกลาง

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

5

โซลูชันนี้ไม่ต้องการให้คุณกำหนดความกว้างและความสูงให้กับ div ป๊อปอัพของคุณ

http://jsfiddle.net/4Ly4B/33/

และแทนที่จะคำนวณขนาดของป๊อปอัพและลบครึ่งหนึ่งขึ้นไปด้านบนจาวาสคริปต์จะปรับขนาดของ popupContainer เพื่อเติมเต็มหน้าจอทั้งหมด ...

(ความสูง 100% ไม่สามารถใช้งานได้เมื่อใช้จอแสดงผล: ตารางเซลล์ (ซึ่งจำเป็นต้องจัดตำแหน่งบางอย่างในแนวตั้ง)) ...

อย่างไรก็ตามมันใช้งานได้ :)

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

4

left: 0;
right: 0;

ไม่ทำงานภายใต้ IE7

เปลี่ยนไปเป็น

left:auto;
right:auto;

เริ่มทำงาน แต่เบราว์เซอร์ที่เหลือหยุดทำงาน! ดังนั้นใช้วิธีนี้สำหรับ IE7 ด้านล่าง

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}

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

คุณคิดที่จะแก้ไขคำตอบเพื่อรวมโซลูชันทั้งหมดหรือไม่?

— Flimm

สิ่งนี้จะไม่ทำงานหากไม่มีระยะขอบอัตโนมัติที่ด้านซ้ายและขวา

— RoM4iK

2

คุณโดยทั่วไปสามารถตัดมันลงไปอีกdivและการตั้งค่าของมันไปpositionfixed

.bg {
  position: fixed;
  width: 100%;
}

.jqbox_innerhtml {
  width: 500px;
  height: 200px;
  margin: 5% auto;
  padding: 10px;
  border: 5px solid #ccc;
  background-color: #fff;
}

<div class="bg">
  <div class="jqbox_innerhtml">
    This should be inside a horizontally and vertically centered box.
  </div>
</div>

ขยายตัวอย่างข้อมูล

— Abdulla Dlshad
แหล่งที่มา

2

ฉันใช้vw(ความกว้างวิวพอร์ต) และvh(ความสูงวิวพอร์ต) วิวพอร์ตเป็นทั้งหน้าจอของคุณ 100vwคือความกว้างของหน้าจอทั้งหมดและ100vhความสูงรวม

.class_name{
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
    position: fixed;
    left: 25vw;top: 25vh;   
}

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

1

เพื่อแก้ไขตำแหน่งใช้สิ่งนี้:

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}

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

3

โปรดให้คำอธิบายว่าทำไมโซลูชันของคุณถึงใช้งานได้สำหรับคำถามที่โพสต์

— Shekhar Chikara

0

หนึ่งคำตอบที่เป็นไปได้:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Center Background Demo</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        div.centred_background_stage_1 {
            position: fixed;
            z-index:(-1 );
            top: 45%;
            left: 50%;
        }

        div.centred_background_stage_2 {
            position: relative;
            left: -50%;

            top: -208px;
            /* % does not work.
               According to the
               http://reeddesign.co.uk/test/points-pixels.html
               6pt is about 8px

               In the case of this demo the background
               text consists of three lines with
               font size 80pt.

               3 lines (with space between the lines)
               times 80pt is about
               ~3*(1.3)*80pt*(8px/6pt)~ 416px

               50% from the 416px = 208px
             */

            text-align: left;
            vertical-align: top;
        }

        #bells_and_wistles_for_the_demo {
            font-family: monospace;
            font-size: 80pt;
            font-weight: bold;
            color: #E0E0E0;
        }

        div.centred_background_foreground {
            z-index: 1;
            position: relative;
        }
    </style>
</head>
<body>
<div class="centred_background_stage_1">
    <div class="centred_background_stage_2">
        <div id="bells_and_wistles_for_the_demo">
            World<br/>
            Wide<br/>
            Web
        </div>
    </div>
</div>
<div class="centred_background_foreground">
    This is a demo for <br/>
    <a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
        http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
    </a>
    <br/><br/>
    <a href="http://www.starwreck.com/" style="border: 0px;">
        <img src="./star_wreck_in_the_perkinnintg.jpg"
             style="opacity:0.1;"/>
    </a>
    <br/>
</div>
</body>
</html>

— Martin Vahi
แหล่งที่มา

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

— Flimm

0

ลองใช้สิ่งนี้สำหรับองค์ประกอบแนวนอนที่ไม่ได้อยู่ตรงกลางอย่างถูกต้อง

ความกว้าง: calc (ความกว้าง: 100% - ความกว้างไม่ว่าจะปิดตรงกลาง )

ตัวอย่างเช่นหากแถบนำทางด้านข้างของคุณคือ 200px:

width: calc(100% - 200px);

— Robert Ross
แหล่งที่มา

0

ฉันแค่ใช้สิ่งนี้:

.c-dialogbox {
    --width:  56rem;
    --height: 32rem;

    position: fixed;

    width:  var(--width);
    height: var(--height);
    left:   calc( ( 100% - var(--width) ) / 2 );
    right:  calc( ( 100% - var(--width) ) / 2 );
    top:    calc( ( 100% - var(--height) ) / 2 );
    bottom: calc( ( 100% - var(--height) ) / 2 );
}

จัดกึ่งกลางของกล่องโต้ตอบทั้งในแนวนอนและแนวตั้งสำหรับฉันและฉันสามารถใช้ความกว้างและความสูงที่แตกต่างกันเพื่อให้พอดีกับความละเอียดหน้าจอที่แตกต่างกันเพื่อให้ตอบสนองด้วยแบบสอบถามสื่อ

ไม่ใช่ตัวเลือกหากคุณยังต้องให้การสนับสนุนเบราว์เซอร์ที่คุณสมบัติ CSS ที่กำหนดเองหรือcalc()ไม่ได้รับการสนับสนุน (ตรวจสอบ caniuse)

— Fabien Snauwaert
แหล่งที่มา

0

อันนี้ใช้ได้ดีที่สุดสำหรับฉัน:

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

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

-13

วิธีแก้ปัญหาที่เข้าใจผิดได้เพียงวิธีเดียวคือใช้ table align = center ดังใน:

<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>

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

ฉันเสียเวลามากเกินไปซ้ำ ๆ เพื่อหลีกเลี่ยงการใช้โต๊ะ แต่ประสบการณ์บอกให้ฉันหยุดการต่อสู้ ใช้ตารางสำหรับการแบ่งศูนย์กลาง ทำงานได้ตลอดเวลาในเบราว์เซอร์ทั้งหมด! ไม่ต้องกังวลอีกต่อไป

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

11

นี่ไม่ได้ตอบคำถามเลย ไม่มีไม่ใช่ CSS position:fixedเทียบเท่ากับการเป็น

— Brilliand