CSS का उपयोग करते हुए एक DIV को असमान रूप से केंद्र बनाएं

Question

मैं एक फ्लेक्सबॉक्स का उपयोग करके एक अन्य डीआईवी के अंदर एक डीआईवी को केंद्रित कर रहा हूं। एक डायलॉग विंडो के बारे में सोचें जो स्क्रीन के केंद्र में जरूरत पड़ने पर पॉप अप हो।

यह ठीक काम करता है, हालांकि यह बहुत बेहतर लगेगा यदि संवाद के ऊपर और नीचे का स्थान बिल्कुल बराबर नहीं था, शेष स्थान का 40% ऊपर और 60% नीचे संवाद होगा। यह मुश्किल हो जाता है क्योंकि संवाद ऊंचाई पाठ की मात्रा के अंदर बदलती है।

उदाहरण के लिए, यदि ब्राउज़र की ऊंचाई 1000 px है, और संवाद विंडो की ऊंचाई 400 px है, तो मैं चाहता हूं कि शेष ऊर्ध्वाधर स्थान (600 px) 240 px ऊपर और 360 px संवाद के नीचे हो। मैं इसे जावास्क्रिप्ट के साथ कर सकता था, लेकिन अगर सीएसएस के साथ कुछ चतुर तरीका है तो मैं उत्सुक हूं। मैंने #dialogBox DIV में नीचे का मार्जिन जोड़ने की कोशिश की, लेकिन वह काम नहीं करता जब संवाद ऊंचाई ब्राउज़र की ऊंचाई के पास हो रही है।

#dialogBoxPanel
  {
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
}
#dialogBox
  {
  width:350px;
}

<div id="dialogBoxPanel">
  <div id="dialogBox">Text</div>
</div>

Comments

क्या आपको पूरे व्यूपोर्ट को कवर करने के लिए बाहरी पैनल की आवश्यकता है? यदि नहीं, तो मैं css-tricks.com/centering-css-complete-guide , "दोनों क्षैतिज और ऊर्ध्वाधर रूप से / अज्ञात चौड़ाई और ऊंचाई का तत्व है?", और अनुवाद प्रतिशत मूल्यों को संशोधित करके समाधान के साथ जाऊंगा । (और यहां तक ​​कि अगर आपको माता-पिता के पूर्ण व्यूपोर्ट आकार की आवश्यकता है [पृष्ठभूमि?], तो आपको दोनों को संयोजित करने में सक्षम होना चाहिए - फ्लेक्स सामान के साथ दूर रहें, बाकी

— रहें

हाँ, बाहरी पैनल पर मेरा प्रभाव कम है इसलिए इसे पूरे व्यूपोर्ट को कवर करने की आवश्यकता है। लेकिन मैं इसके अंदर एक और DIV जोड़ सकता था, और आपका समाधान ठीक काम करेगा। धन्यवाद 04FS!

— ब्योर्न मोरेन

सटीकता के लिए, आप वर्टिकल अलाइनमेंट की बात कर रहे हैं, सेंटरिंग की नहीं।

— माइकल बेंजामिन

Answer 1

सफेद स्थान का अनुकरण करने के लिए छद्म तत्व और स्तंभ दिशा का उपयोग करें। बस flex-growनियंत्रण के लिए छद्म तत्व को समायोजित करें कि प्रत्येक को कितना खाली स्थान लेना चाहिए। समान फ्लेक्स-ग्रो के बराबर जगह देगा:

#dialogBoxPanel {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  /* the center */
  background:linear-gradient(red,red) center/100% 1px no-repeat;
}

#dialogBox {
  width: 350px;
  border:1px solid;
}

#dialogBoxPanel:before {
  content:"";
  flex-grow:4;
}
#dialogBoxPanel:after {
  content:"";
  flex-grow:6;
}

<div id="dialogBoxPanel">
  <div id="dialogBox">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit diam eu nisl fringilla ornare. Pellentesque aliquam quam et tellus egestas sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin bibendum,</div>
</div>

तुम भी उपयोग कर सकते हैं 2और 3। हमें बस एक ही अनुपात रखने की आवश्यकता है:

#dialogBoxPanel {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  /* the center */
  background:linear-gradient(red,red) center/100% 1px no-repeat;
}

#dialogBox {
  width: 350px;
  border:1px solid;
}

#dialogBoxPanel:before {
  content:"";
  flex-grow:2;
}
#dialogBoxPanel:after {
  content:"";
  flex-grow:3;
}

<div id="dialogBoxPanel">
  <div id="dialogBox">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit diam eu nisl fringilla ornare. Pellentesque aliquam quam et tellus egestas sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin bibendum,</div>
</div>

एक अन्य विचार यह है 40%कि अनुवाद के साथ शीर्ष मान का उपयोग करें और स्थिति को ठीक करें (केंद्र में रहते हुए तर्क 50%)

#dialogBoxPanel {
  position: absolute;;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  /* the center */
  background:linear-gradient(red,red) center/100% 1px no-repeat;
}

#dialogBox {
  position:relative;
  top:40%;
  width: 350px;
  transform:translateY(-40%);
  margin:auto;
  border:1px solid;
}

<div id="dialogBoxPanel">
  <div id="dialogBox">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit diam eu nisl fringilla ornare. Pellentesque aliquam quam et tellus egestas sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin bibendum,</div>
</div>

Comments

बहुत बहुत धन्यवाद Temani! दोनों समाधान पूरी तरह से काम करते हैं, और विशेष मामले को छोड़कर समान लगते हैं जहां संवाद ब्राउज़र की तुलना में लंबा है। पहला समाधान ब्राउज़र के शीर्ष के साथ संवाद के शीर्ष को रखता है, तल पर क्रॉप करता है। नीचे और ऊपर दोनों दूसरी फसलें। बस प्राथमिकता की बात है।

— ब्योर्न मॉरेन

Answer 2

यह समाधान उपयोग करता है display: grid, यह एक नई सुविधा है ताकि ब्राउज़र समर्थन की जांच करें और अधिक जानने के लिए यहां क्लिक करें ।

यह वह रेखा है जो शीर्ष और निचले स्थानों को नियंत्रित करती है:

grid-template-rows: 40fr [content-start] auto [content-end] 60fr;

स्निपेट पाठ सामग्री आपके लिए यह जांचने के लिए संपादित की जा सकती है कि ऊंचाई में परिवर्तन होने पर भी बॉक्स केंद्रित रहता है।

#dialogBoxPanel {
    display: grid;
    place-content: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    grid-template-rows: 40fr [content-start] auto [content-end] 60fr;
}
#dialogBox {
    border: 1px solid;
    width: 350px;
    grid-area: content;
}

<div id="dialogBoxPanel">
   <div id="dialogBox" contenteditable>Text</div>
</div>

Comments

मैं इसके उपयोग पर विचार करूंगा 4fr auto 6fr। आपके पास क्या काम है, लेकिन 40% + 60% + 1fr के बाद से कुछ अतिप्रवाह होता है, हमेशा 100% से बड़ा होगा और आप केंद्रित कर रहे हैं, इसलिए ओवरलो को ऊपर और नीचे से समान रूप से विभाजित किया जाएगा: jsfiddle.net/cobutn.e/2 । आप यह भी नोटिस करेंगे कि यह उम्मीद की तरह 100% नहीं है

— तैमनी आफि

मैंने अभी ऑटो के लिए 1 एफआर बदल दिया है, मैं इसे प्रश्न मानों से मिलान करने के लिए% के रूप में छोड़ दूंगा। त्रुटि इंगित करने के लिए बहुत बहुत धन्यवाद!

— राफेलकास्ट्रोकोउटो

ऑटो और 1 एफआर आपके मामले में एक ही परिणाम देगा, मुद्दा प्रतिशत का उपयोग है; 1fr=minmax(auto,1fr)और आपके मामले में यह गिर जाएगा autoक्योंकि 40% + 60% = 100% के बाद से कोई खाली जगह नहीं है (इसीलिए आपका हमेशा ओवरफ्लो होगा)

— Temani Afif

यहाँ मेरी बात को स्पष्ट करने के लिए एक और बेला है: jsfiddle.net/cobutn0e/3 ध्यान दें कि 3 पहले कैसे समान हैं, तीसरा एक 0 पर गिर रहा है और अंतिम एक जो मैंने सुझाया है

— Temani Afif

अब मैं इसे प्राप्त करता हूं, समझ में आता है। क्योंकि यह दिन के अंत में समान है, इसलिए 40fr और 60fr का उपयोग करें। मुझे सिखाने के लिए अपना समय निकालने के लिए फिर से धन्यवाद!

— राफेलकास्ट्रोकोउटो

Answer 3

आप spacers divs जोड़ सकते हैं और फ्लेक्स-ग्रो को 4: 6 अनुपात के साथ सेट कर सकते हैं।

#dialogBoxPanel {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;

  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}

#dialogBox {
  width: 350px;
  border: 1px solid black;
}

.spacer-top{
  flex-grow: 4;
}
.spacer-bottom{
  flex-grow: 6;

<div id="dialogBoxPanel">
  <div class="spacer-top"></div>
  <div id="dialogBox">Text</div>
  <div class="spacer-bottom"></div>
</div>

Comments

अब केवल @ तमीनी आफिफ़ का उत्तर देखा गया है, लेकिन यह "बाद" और "पहले" के साथ समान काम करता है

— Itay Gal

Answer 4

स्थिति और मार्जिन का उपयोग करते हुए सरल तरीका, मैंने मान लिया कि आपकी संवाद ऊंचाई हमेशा ब्राउज़र की ऊँचाई का 40% है।

.modal{
            max-height:50%;
            width:400px;
            margin: 10% auto 5% auto;
            position:absolute;
            top:0;
            bottom:0;
            right:0;
            left:0;
            overflow-y: auto
        }
        .modal-body{
            background-color: beige;
            padding: 20px;
            line-height: 21px
        }

एचटीएमएल

<div class="modal">
 <div class="modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea </div>
</div>

Comments

हाय स्वागत है, अगली बार कृपया ध्यान से प्रश्न पढ़ें, यह बताता है: "संवाद की ऊंचाई पाठ की मात्रा के साथ बदलती है।"

— राफेलकास्ट्रोकोउटो

@rafaelcastrocouto - अब इसे प्रतिशत में अधिकतम ऊंचाई के माध्यम से नियंत्रित करना, क्योंकि इसे ऊंचाई के बिना छोड़ने से शीर्ष और नीचे के अंतरिक्ष सौंदर्य के प्रश्न उद्देश्य हल नहीं होंगे।

— अंशुल चौरसिया