पूरे HTML शरीर को केंद्र में कैसे संरेखित करें?

Question 1

मैं संपूर्ण html बॉडी को केंद्र में कैसे संरेखित करूं?

Question 2

मैं सिर्फ इस पुराने पोस्ट पर ठोकर खाई, और जब तक मुझे यकीन है कि user01 लंबे समय से उसका जवाब मिला है, मैंने पाया कि मौजूदा जवाब काफी काम नहीं करते हैं। दूसरों द्वारा प्रदान की गई जानकारी का उपयोग करके थोड़ा सा खेलने के बाद, मुझे एक समाधान मिला जो IE, फ़ायरफ़ॉक्स और क्रोम में काम करता है। CSS में:

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

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

यह एब्नियर के उत्तर के लगभग समान है, लेकिन मैंने पाया कि चौड़ाई सहित सेंटरिंग को तोड़ देगा, जैसा कि ऑटो मार्जिन को छोड़ देगा। मुझे उम्मीद है कि जो कोई भी इस धागे पर ठोकर खाएगा, उसे मेरा जवाब मददगार मिलेगा।

नोट:html, body { height: 100%; } केवल क्षैतिज रूप से केंद्र के लिए Omit ।

Question 3

तुम कोशिश कर सकते हो:

body{ margin:0 auto; }

Question 4

संपादित करें

Flexbox के साथ आज के रूप में, आप कर सकते हैं

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

प्रीवियस ANSWER

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

Question 5

अगर मेरे पास सीएसएस के संबंध में एक बात है जो मुझे पसंद है, तो यह मेरे लिए बहुत बड़ी बात है !

इस विधि के लाभ :

ब्राउज़र के साथ पूर्ण संगतता जो लोग वास्तव में उपयोग करते हैं
कोई तालिकाओं की आवश्यकता नहीं है
अपने माता-पिता के अंदर किसी भी अन्य तत्वों को केंद्रित करने के लिए अत्यधिक पुन: प्रयोज्य
माता-पिता और बच्चों को गतिशील (बदलते) आयामों के साथ प्रदर्शित करता है!

मैं हमेशा 2 वर्गों का उपयोग करके ऐसा करता हूं: मूल तत्व निर्दिष्ट करने के लिए एक, जिसकी सामग्री केंद्रित होगी ( .centered-wrapper), और माता-पिता के बच्चे को निर्दिष्ट करने के लिए 2 एक .centered-content। यह द्वितीय श्रेणी उस मामले में उपयोगी है जहां माता-पिता के कई बच्चे हैं, लेकिन केवल 1 को केंद्रित करने की आवश्यकता है)। इस मामले में, bodyहोगा .centered-wrapper, और एक आंतरिक divहोगा .centered-content।

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

केंद्रित करने का विचार अब .centered-contentएक बनाना होगा inline-block। यह आसानी से क्षैतिज केंद्रित, के माध्यम से सुविधा प्रदान करेगा text-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;
}