จะจัดเนื้อหา html ทั้งหมดให้อยู่ตรงกลางได้อย่างไร

Question 1

ฉันจะจัดเนื้อหา html ทั้งหมดให้อยู่ตรงกลางได้อย่างไร

Question 2

ฉันเพิ่งสะดุดกับโพสต์เก่านี้และในขณะที่ฉันแน่ใจว่า user01 ได้พบคำตอบของเขามานานแล้ว แต่ฉันพบว่าคำตอบปัจจุบันไม่ค่อยได้ผล หลังจากเล่นไปเรื่อย ๆ โดยใช้ข้อมูลที่ผู้อื่นให้มาฉันพบวิธีแก้ปัญหาที่ใช้ได้กับ IE, Firefox และ Chrome ใน CSS:

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
}

นี่เกือบจะเหมือนกันกับคำตอบของ abernier แต่ฉันพบว่าการรวมความกว้างจะทำให้จุดศูนย์กลางแตกเช่นเดียวกับการเว้นระยะขอบอัตโนมัติ ฉันหวังว่าคนอื่น ๆ ที่สะดุดในหัวข้อนี้จะพบว่าคำตอบของฉันเป็นประโยชน์

หมายเหตุ:ละเว้นhtml, body { height: 100%; }ให้จัดกึ่งกลางในแนวนอนเท่านั้น

Question 3

คุณสามารถลอง:

body{ margin:0 auto; }

Question 4

แก้ไข

ณ วันนี้ด้วย flexbox คุณสามารถทำได้

body {
  display:flex; flex-direction:column; justify-content:center;
  min-height:100vh;
}

คำตอบก่อนหน้านี้

html, body {height:100%;}
html {display:table; width:100%;}
body {display:table-cell; text-align:center; vertical-align:middle;}

Question 5

ถ้าฉันมีสิ่งหนึ่งที่ฉันชอบที่จะแบ่งปันเกี่ยวกับ CSS มันเป็นวิธีที่ฉันชอบในการเป็นศูนย์กลางของทั้งสองแกน !!!

ข้อดีของวิธีนี้ :

เข้ากันได้กับเบราว์เซอร์ที่ผู้คนใช้งานจริง
ไม่ต้องใช้ตาราง
ใช้ซ้ำได้สูงสำหรับการจัดองค์ประกอบอื่น ๆ ไว้ตรงกลางภายในพาเรนต์
มาพร้อมกับผู้ปกครองและเด็กที่มีมิติ (เปลี่ยนแปลง) แบบไดนามิก!

ฉันทำสิ่งนี้เสมอโดยใช้ 2 คลาส: หนึ่งเพื่อระบุองค์ประกอบหลักซึ่งเนื้อหาจะอยู่กึ่งกลาง ( .centered-wrapper) และอันที่ 2 เพื่อระบุว่าลูกของพาเรนต์ใดอยู่กึ่งกลาง ( .centered-content) คลาสที่ 2 นี้มีประโยชน์ในกรณีที่ผู้ปกครองมีลูกหลายคน แต่ต้องจัดให้มี 1 คนเท่านั้น) ในกรณีนี้bodyจะเป็น.centered-wrapperและด้านในจะเป็นdiv.centered-content

<html>
    <head>...</head>
    <body class="centered-wrapper">
        <div class="centered-content">...</div>
    </body>
</html>

ความคิดที่อยู่ตรงกลางในขณะนี้จะทำให้ นี้จะได้อย่างง่ายดายอำนวยความสะดวกอยู่ตรงกลางแนวนอนผ่านและยังช่วยให้แนวตั้งตรงกลางในขณะที่คุณจะได้เห็น.centered-contentinline-blocktext-align: center;

.centered-wrapper {
    position: relative;
    text-align: center;
}
.centered-wrapper:before {
    content: "";
    position: relative;
    display: inline-block;
    width: 0; height: 100%;
    vertical-align: middle;
}
.centered-content {
    display: inline-block;
    vertical-align: middle;
}

สิ่งนี้จะช่วยให้คุณสามารถนำกลับมาใช้ใหม่ได้จริง 2 ชั้นสำหรับการให้เด็กเป็นศูนย์กลางของผู้ปกครอง เพียงแค่เพิ่ม.centered-wrapperและ.centered-contentคลาส

แล้ว:beforeองค์ประกอบนั้นคืออะไร? ช่วยอำนวยความสะดวกvertical-align: middle;และจำเป็นเนื่องจากการจัดแนวตั้งไม่สัมพันธ์กับความสูงของพ่อแม่ - การจัดแนวแนวตั้งสัมพันธ์กับความสูงของพี่น้องที่สูงที่สุด !!! . ดังนั้นด้วยการตรวจสอบให้แน่ใจว่ามีพี่น้องที่มีความสูงเท่ากับความสูงของพ่อแม่ (สูง 100% ความกว้าง 0 เพื่อให้มองไม่เห็น) เราจึงรู้ว่าการจัดแนวตั้งจะเป็นไปตามความสูงของพ่อแม่

สิ่งสุดท้าย: คุณต้องตรวจสอบให้แน่ใจว่าแท็กhtmlและbodyแท็กของคุณมีขนาดเท่ากับหน้าต่างเพื่อให้ตรงกลางกับเบราว์เซอร์

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

ซอ: https://jsfiddle.net/gershy/g121g72a/

Question 6

http://bluerobot.com/web/css/center1.html

body {
    margin:50px 0; 
    padding:0;
    text-align:center;
}

#Content {
    width:500px;
    margin:0 auto;
    text-align:left;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
}

Question 7

ผมใช้ flexbox htmlบน เพื่อผลลัพธ์ที่ดีคุณสามารถจับคู่เบราว์เซอร์โครเมี่ยมเพื่อจัดเฟรมเนื้อหาของคุณบนหน้าจอที่มีขนาดใหญ่กว่าค่าสูงสุดของหน้าเว็บของคุณ ฉันพบว่า#eeeeeeมันเข้ากันได้ดี คุณสามารถเพิ่มเงากล่องเพื่อให้ได้เอฟเฟกต์การลอยตัวที่สวยงาม

    html{
        display: flex;
        flex-flow: row nowrap;  
        justify-content: center;
        align-content: center;
        align-items: center;
        height:100%;
        margin: 0;
        padding: 0;
        background:#eeeeee;
    }
    body {
        margin: 0;
        flex: 0 1 auto;
        align-self: auto;
        /*recommend 1920 / 1080 max based on usage stats, use 100% to that point*/
        width: 100%
        max-width: 900px;
        height: 100%;
        max-height: 600px;
        background:#fafafa;
        -webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
    }

รูปภาพ / ข้อมูลที่เอื้อเฟื้อStatCounter

Question 8

<style>
        body{
            max-width: 1180px;
            width: 98%;
            margin: 0px auto;
            text-align: left;
        }
</style>

เพียงใช้สไตล์นี้ก่อนที่จะใช้ CSS ใด ๆ คุณสามารถเปลี่ยนความกว้างได้ตามความต้องการของคุณ

Question 9

แค่เขียน

<body>
   <center>
            *Your Code Here*
   </center></body>

Question 10

ลองทำตามนี้

body {
max-width: max-content;
margin: auto;
}