วิธีวาง div ในตำแหน่งกลางหน้าจอเมื่อหน้าใหญ่กว่าหน้าจอ

141

สวัสดีฉันกำลังใช้สิ่งที่คุ้นเคยกับสิ่งต่อไปนี้เพื่อให้ div อยู่ในตำแหน่งกลางหน้าจอ:

<style type="text/css"> 
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

</style>


<div id="mydiv">Test Div</div>

อย่างไรก็ตามปัญหาเกี่ยวกับสิ่งนี้คือมันวางตำแหน่งรายการที่อยู่ตรงกลางของหน้าไม่ใช่หน้าจอ ดังนั้นหากหน้าจอมีบางหน้าจอสูงและฉันอยู่ที่ด้านบนของหน้า (ส่วนบนของส่วนจะปรากฏบนหน้าจอ) เมื่อฉันทำให้ div ปรากฏไม่ได้อยู่บนหน้าจอ คุณต้องเลื่อนลงเพื่อดู

มีใครช่วยบอกฉันหน่อยได้ไหมว่าคุณจะทำให้มันปรากฏขึ้นตรงกลางหน้าจอได้อย่างไร?

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

ฉันเพิ่งทดสอบรหัสที่แน่นอนในหน้าทดสอบและมันอยู่ตรงกลาง div ในหน้าแม้จะมีประมาณ 100 <br />ก่อนที่จะลองและกดลง อาจลองตรวจสอบส่วนที่เหลือของรหัสของคุณเพื่อดูว่าคุณมีบางอย่างที่เขียนทับค่า DIV หรือว่าส่งผลต่อ DIV ของคุณเพื่อทำให้เกิดปัญหาเหล่านี้

— อีไล

269

เพียงเพิ่มposition:fixedและมันจะเก็บไว้ในมุมมองแม้ว่าคุณจะเลื่อนลง ดูได้ที่http://jsfiddle.net/XEUbc/1/

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

— ฮุสเซน
แหล่งที่มา

1

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

— Vinnie

91

ฉันคิดว่านี่เป็นวิธีง่ายๆ

<div style="
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: #f3f3f3;">Full Center ON Page
</div>

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

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

7

วิธีนี้ดีกว่าคำตอบที่ได้รับอนุมัติ

— Viacheslav Dobromyslov

2

ชอบอันนี้ แต่ใช้งานได้ในเบราว์เซอร์ "เก่ากว่า" หรือไม่

— BernaMariano

14

ใช้การแปลง

<style type="text/css">
    #mydiv {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

โซลูชัน Javascript:

var left = (screen.width / 2) - (530 / 2);
var top = (screen.height / 2) - (500 / 2);
var _url = 'PopupListRepair.aspx';
window.open(_url, self, "width=530px,height=500px,status=yes,resizable=no,toolbar=no,menubar=no,left=" + left + ",top=" + top + ",scrollbars=no");

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

5

เพียงแค่ใส่ margin:auto;

#mydiv {
    margin:auto;
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

<div id="mydiv">Test Div</div>

5

ลองอันนี้.

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

— Chandan Sharma
แหล่งที่มา

1

ฉันคิดว่าอันนี้มีประโยชน์มากกว่าเพราะคุณไม่จำเป็นต้องใช้สไตล์ใด ๆ กับองค์ประกอบหลัก

— canbax

3

position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

สิ่งนี้ใช้ได้สำหรับฉัน

— อับราฮัม
แหล่งที่มา

2

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

— drneel

2

คำตอบสั้น ๆ เพียงแค่เพิ่มposition:fixedและนั่นจะแก้ปัญหาของคุณ

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

1

<html>
<head>
    <style type="text/css">

#mydiv {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:100px;
    height:200px;
    margin:auto;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
    </style>
</head>
<body>
<div id="mydiv">Maitrey</div>
</body>
</html>

— Maitrey Malve
แหล่งที่มา

คำถามถูกถามฉันในการสัมภาษณ์ "คุณจัดตำแหน่งศูนย์ div ของหน้าจอได้อย่างไร"

— Maitrey Malve

1

ด้านล่างเป็นตัวอย่างการทำงานของสิ่งนี้

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

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

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

ในตัวอย่างการโหลด divข้างต้นจะอยู่กึ่งกลางเสมอ

หวังว่าสิ่งนี้จะช่วยคุณได้ :)

— Vikash Pandey
แหล่งที่มา

1

สองวิธีในการวางตำแหน่งแท็กที่อยู่ตรงกลางของหน้าจอหรือแท็กหลัก:

ใช้ตำแหน่ง:

ตั้งค่าแท็กพาเรนต์positionเป็นrelative(หากแท็กเป้าหมายมีแท็กพาเรนต์) จากนั้นตั้งค่าสไตล์แท็กเป้าหมายดังนี้:

#center {
  ...  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

ใช้ดิ้น:

สไตล์แท็กหลักควรมีลักษณะดังนี้:

#parent-tag {
  display: flex;
  align-items: center;
  justify-content: center;
}

— อเล็กซ์โจลี่
แหล่งที่มา

0

ในหน้าสคริปต์ของคุณ ...

    $('.a-middle').css('margin-top', function () {
        return ($(window).height() - $(this).height()) / 2
    });

ใช้คลาส a-middle ใน Div ...

   <div class="a-middle">

— แอนโทนีแจ็ค
แหล่งที่มา

-1

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

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

— Lăng Minh
แหล่งที่มา

-1

ใช้ FLEX

display: flex;
height: 100%;
align-items: center;
justify-content: center;

— ASIR THERANS RAJA M
แหล่งที่มา

สิ่งนี้จะจัดเนื้อหาให้อยู่ที่องค์ประกอบหลักหรือหน้าไม่ใช่ที่หน้าจอ

— ฌอน

-2

width:30em;
position: static;
margin: 0px auto 0px auto;
padding: 0px;

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

เพิ่มคำอธิบายบางอย่าง

— Pankaj Makwana

-4

สำหรับสิ่งนี้คุณจะต้องตรวจสอบขนาดหน้าจอ ไม่สามารถทำได้ด้วย CSS หรือ HTML; คุณต้องมีจาวาสคริปต์ นี่คือรายการ Mozilla Developer Center เกี่ยวกับคุณสมบัติของหน้าต่างhttps://developer.mozilla.org/en/DOM/window#Properties

ตรวจสอบความสูงและตำแหน่งที่เหมาะสม

— Scott Radcliff
แหล่งที่มา