अनुवाद (-50%) को एक तत्व को केंद्र में रखने की आवश्यकता क्यों है जो शीर्ष पर है: 50%?

Question

मैं देख सकता हूं कि यह कोड अपने पैरेंट एलिमेंट के भीतर एक div को संरेखित करने के लिए काम करता है:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

सवाल यह है कि क्यों? मेरा पहला विचार यह था कि मूल तत्व व्यूपोर्ट की तुलना में अधिक शामिल था। मैंने अपने पैरेंट व्यूपोर्ट की ऊंचाई को बराबर 100vhऔर चौड़ाई में बनाया 100%। वह काम नहीं आया। मुझे अभी भी अनुवाद या एक नकारात्मक मार्जिन ऑफसेट की आवश्यकता थी। जब मूल तत्व को सेट किया जाता है तो मुझे नकारात्मक ऑफसेट की आवश्यकता क्यों है margin: 0;? क्या यह एक गणना वाले मार्जिन के कारण है जिसे मैं ध्यान नहीं दे रहा हूं?

Comments

शीर्ष माता-पिता के सापेक्ष है, परिवर्तन स्वयं के सापेक्ष है। गणित करो, तुम कैसे इस तत्व को केंद्रित करने में परिणाम होगा

— njzk2

Answer 1

शीर्ष: 0 (डिफ़ॉल्ट)

डिफ़ॉल्ट रूप से, आपका तत्व पृष्ठ के शीर्ष पर है, और तत्व का शीर्ष 0 पर है:

--------Top of Page--------
{element}


------Middle of  Page------



------Bottom of  Page------

शीर्ष: 50%

जब आप इसे 50% ऊंचाई (पूरे पृष्ठ का 50%) से नीचे ले जाते हैं, तो तत्व का शीर्ष 50% अंक पर होता है, जिसका अर्थ है कि तत्व 50% से शुरू होता है और केंद्रित नहीं होता है।

--------Top of Page--------



------Middle of  Page------
{element}


------Bottom of  Page------

शीर्ष: 50%; रूपांतर: ट्रांस्वाय (-50%);

जब तत्व का शीर्ष आधे रास्ते के निशान पर होता है, तो हम पूरे पृष्ठ के साथ इसे केन्द्रित करने के लिए तत्व को अपनी स्वयं की ऊँचाई से आधा ऊपर ले जा सकते हैं। ठीक यही transform:translateY(-50%);है:

--------Top of Page--------



{element}-Middle of Page---



------Bottom of  Page------

लेकिन हम ऐसा क्यों नहीं कह सकते top: 25%? मैंने आपको उस कार्यान्वयन के साथ अंतर दिखाने के लिए एक त्वरित स्निपेट बनाया है:

body {
  margin: 0;
}
.row {
  display: flex;
  justify-content: space-between;
}
.container {
  display: inline-block;
  margin: 5px;
  width: 200px;
  height: 200px;
  background: tomato;
}
.inner {
  position: relative;
  margin: 0 auto;
  height: 50%;
  width: 50%;
  background: #FFC4BA;
}
.inner.small {
  width: 25%;
  height: 25%;
}
.inner.big {
  width: 75%;
  height: 75%;
}
.percent {
  top: 25%
}
.transform {
  top: 50%;
  transform: translateY(-50%);
}

<b>First row </b>looks alright, but that's because the gap works well with the 25%
<div class="row">
  <div class="container">
    <div class="inner percent"></div>
  </div>
  <div class="container">
    <div class="inner transform"></div>
  </div>
</div>
<b>Second row </b>made the center square a bit smaller, and the 25% now is too high as we'd expect the bottom of the element to reach 75%
<div class="row">
  <div class="container">
    <div class="small inner percent"></div>
  </div>
  <div class="container">
    <div class="small inner transform"></div>
  </div>
</div>
<b>Third row </b>now I've made the center box big and it ends lower than 75% making 25% start too late
<div class="row">
  <div class="container">
    <div class="big inner percent"></div>
  </div>
  <div class="container">
    <div class="big inner transform"></div>
  </div>
</div>

Comments

मैं आंशिक रूप से समझता हूं कि आप क्या कह रहे हैं। मेरे पास ऐसे प्रश्न हैं जो मैंने @Quentin उत्तर की टिप्पणियों में जोड़े हैं।

— ltrainpr

मुझे लगता है कि क्या हो रहा है, का दृश्य प्रतिनिधित्व पसंद है। धन्यवाद।

— ltrainpr

टीएल; डीआर topपृष्ठ / कंटेनर ऊंचाई से 50% transform: translateYलागू होता है , स्वयं तत्व ऊंचाई से -50% लागू होता है।

— aldo.roman.nurena

Answer 2

जबकि अन्य लोगों ने जवाब दिया है कि -50 आंतरिक तत्व को आधा ऊपर ले जाता है, इसकी खुद की ऊंचाई है, मुझे लगा कि इस छोटे से एनीमेशन top: 50%;ने पहले आंदोलन को दिखाया , उसके बाद transform: translateY(-50%);दूसरा, मदद कर सकता है।

@keyframes centerMe {
  0% { top: 0%; transform: translateY(0%); }
  50% { top: 50%; transform: translateY(0%); }
  100% { top: 50%; transform: translateY(-50%); }
}

.outer {
  position: relative;
  border: solid 1px;
  height: 200px;
  width: 200px;
}

.inner {
  position: relative;
  background-color: red;
  height: 50px; width: 50px;
  margin: auto;
  animation: centerMe 5s;
  animation-fill-mode: forwards;
}

/* rules for example */
.hline,.vline{background:#000;position:absolute}.vline{height:100%;width:1px;left:calc(50% - .5px);top:0}.hline{width:100%;height:1px;top:calc(50% - .5px)}

<div class="outer">
  <div class="hline"></div>
  <div class="vline"></div>
  <div class="inner"></div>  
</div>

Comments

गोली मार! यह एक भयानक दृश्य एनीमेशन है। यही कारण है कि मुझे बैक एंड प्रोग्रामिंग की तुलना में फ्रंट एंड ज्यादा पसंद है। धन्यवाद।

— 14

@ Itrainpr वहाँ हमेशा एक इनाम है! :-)

— wizzwizz4

Answer 3

position: relative;
top: 50%;

… माता-पिता की आधी ऊंचाई के बराबर दूरी से तत्व को नीचे ले जाता है।

डिफ़ॉल्ट स्थिति डालता है के बाद से शीर्ष पर भीतरी तत्व के शीर्ष बाहरी तत्व की, इस डालता शीर्ष पर भीतरी तत्व के बीच बाहरी तत्व की।

transform: translateY(-50%);

इस के आधे ऊंचाई की दूरी तक आंतरिक तत्व वापस ले जाता है आंतरिक तत्व।

उनका संयोजन मूल तत्व के मध्य में आंतरिक तत्व के मध्य को डालता है ।

Comments

अगर मैं समझ रहा हूँ कि आप क्या कह रहे हैं कि बाल तत्व के शीर्ष को माता-पिता के मध्य से नीचे ले जाया जा रहा है। फिर हम बाल तत्व को बाल तत्व की आधी दूरी पर ले जा रहे हैं, जो मूल तत्व के 25% के बराबर है। क्या वो सही है? यदि ऐसा है, तो क्यों नहीं इसे नीचे ले जाकर top: 25%? यदि नहीं, तो top: 25%इस काम के आसपास कैसे अलग है?

— ltrainpr

"फिर हम बाल तत्व को बाल तत्व की आधी दूरी पर ले जा रहे हैं, जो मूल तत्व के 25% के बराबर है। क्या यह सही है?" - यह सही होगा यदि (और केवल अगर) बाल तत्व height: 50%(या समतुल्य) था, लेकिन प्रश्न में कोड में कुछ भी नहीं बताता है कि बच्चे की ऊंचाई ज्ञात है।

— क्वेंटिन

@ exrainpr कि समझ में आता है क्या आप समझते हैं कि आप अभी 25% क्यों नहीं कह सकते हैं?

— एंड्रयू बोन

@AndrewBone हां, मुझे अभी मिल गया है। इसे समझाने के लिए समय निकालने के लिए धन्यवाद।

— ltrainpr

बाहरी तत्व के शीर्ष पर डिफ़ॉल्ट स्थिति केवल तभी नहीं है जब वह पहला (अंतरिक्ष-ग्रहण करने वाला) बच्चा हो, या जब उपयोग कर रहा हो position: absolute(यह मानते हुए कि बाहरी तत्व स्वयं तैनात है)?

— बेर्गी

Answer 4

शीर्ष -50% को -50% अनुवाद ऑफसेट की आवश्यकता क्यों है?

सीधे इस प्रश्न का उत्तर देने के बजाय, मैं और अधिक सामान्य प्रश्न का उत्तर देने जा रहा हूं:

CSS में स्थिति एंकरिंग कैसे काम करती है?

उम्मीद है, आम तौर पर सवाल का जवाब देने में, आप उन हिस्सों को समझेंगे जो आपके विशिष्ट मामले पर लागू होते हैं।

---

"स्थिति एंकरिंग" से आपका क्या अभिप्राय है?

स्थिति एंकरिंग तब होती है जब एक डोम नोड को इस तरह से तैनात किया जाता है कि वह किसी दिए गए आयाम में अपने माता-पिता के लिए "लंगर" हो। यदि नोड के ऊपर बाईं ओर अपने माता-पिता के ऊपर बाईं ओर लंगर डाला गया है, तो नोड्स उनके शीर्ष बाएं कोने में संरेखित रहेंगे, चाहे कोई भी तत्व का आकार हो।

स्थिति एंकरिंग कैसी दिखती है?

मैं आगे के सभी उदाहरणों के लिए एक टेम्पलेट का उपयोग करने जा रहा हूं, इसलिए आधार उदाहरण को समझना महत्वपूर्ण है।

.container {
  background-image: -webkit-linear-gradient(left, darkred 0, darkred 50%, goldenrod 50%, goldenrod 100%), -webkit-linear-gradient(left, darkgreen 0, darkgreen 50%, darkblue 50%, darkblue 100%);
  background-image: linear-gradient(to right, darkred 0, darkred 50%, goldenrod 50%, goldenrod 100%), linear-gradient(to right, darkgreen 0, darkgreen 50%, darkblue 50%, darkblue 100%);
  background-position: top, bottom;
  background-repeat: no-repeat;
  background-size: 100% 50.1%, 100% 50.1%;
  height: 70vh;
  margin: 15vh 15vw;
  position: relative;
  width: 70vw;
}
.box {
  background-image: -webkit-linear-gradient(left, red 0, red 50%, yellow 50%, yellow 100%), -webkit-linear-gradient(left, green 0, green 50%, blue 50%, blue 100%);
  background-image: linear-gradient(to right, red 0, red 50%, yellow 50%, yellow 100%), linear-gradient(to right, green 0, green 50%, blue 50%, blue 100%);
  background-position: top, bottom;
  background-repeat: no-repeat;
  background-size: 100% 50.1%, 100% 50.1%;
  height: 50vmin;
  position: absolute;
  width: 50vmin;
}

<div class="container">
  <div class="box"></div>
</div>

यह उदाहरण एक माता-पिता को दिखाता है .containerजिसमें गहरे लाल, गहरे पीले, गहरे हरे और गहरे नीले रंग के चतुर्भुज हैं जो आसानी से संरेखण देख सकते हैं। अंदर, इसमें एक .boxलाल, पीला, हरा और नीला रंग होता है, जो संरेखण के विपरीत होता है।

आगे के सभी उदाहरणों में संबंधित कोड को और अधिक बनाने के लिए इस बॉयलरप्लेट को छोटा किया जाएगा।

ध्यान दें कि डिफ़ॉल्ट रूप से, बच्चे के शीर्ष बाईं ओर माता-पिता के ऊपर बाईं ओर लंगर डाले हुए हैं।

जनक अनुचर

जनक प्रस्तोता का उपयोग करके समायोजित किया जा सकता top, bottom, left, और rightबच्चे तत्व पर गुण।

ऊपर

topसंपत्ति का उपयोग माता-पिता के शीर्ष किनारे पर बच्चे के शीर्ष किनारे को लंगर डालेगा।

मान लिया गया bottomहै top: 0कि डिफ़ॉल्ट रूप से अलग नहीं दिखाया जाएगाtop: auto

.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  top: 0;
}

<div class="container">
  <div class="box"></div>
</div>

प्रतिशत का उपयोग करने से माता-पिता के ऊपर से दिए गए प्रतिशत में बच्चे के शीर्ष किनारे को संरेखित किया जाएगा।

top: 50% माता-पिता का मध्य है:

.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  top: 50%;
}

<div class="container">
  <div class="box"></div>
</div>

top: 100% माता पिता के नीचे है:

.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  top: 100%;
}

<div class="container">
  <div class="box"></div>
</div>

निचला एंकरिंग

बॉटम एंकरिंग बच्चे के निचले किनारे को अभिभावक के निचले किनारे पर लंगर डालेगी:

.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  bottom: 0;
}

<div class="container">
  <div class="box"></div>
</div>

bottom: 50%माता-पिता का मध्य है, जिसके विपरीत बच्चे को जोड़ दिया गया है top: 50%:

.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  bottom: 50%;
}

<div class="container">
  <div class="box"></div>
</div>

bottom: 100% माता-पिता का शीर्ष है:

.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  bottom: 100%;
}

<div class="container">
  <div class="box"></div>
</div>

लेफ्ट एंकरिंग

leftसंपत्ति माता पिता के बाईं बढ़त के लिए बच्चे के बाएँ किनारे लंगर होगा।

मान लिया गया rightहै left: 0कि डिफ़ॉल्ट रूप से अलग नहीं दिखाया जाएगा left: auto।

left: 50% माता-पिता का मध्य है:

.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  left: 50%;
}

<div class="container">
  <div class="box"></div>
</div>

left: 100% माता-पिता के दाईं ओर लटक रहे बच्चे को छोड़ देता है।

राइट एंकरिंग

rightसंपत्ति माता पिता के दाएं किनारे करने के लिए बच्चे के दाएं किनारे लंगर होगा:

right: 50%माता-पिता का मध्य है, जिसके विपरीत बच्चे को जोड़ दिया गया है left: 50%:

.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  right: 50%;
}

<div class="container">
  <div class="box"></div>
</div>

right: 100% माता-पिता के बाईं ओर से लटका हुआ बच्चा छोड़ देता है।

बाल एंकरिंग

transformसंपत्ति का उपयोग करके माता-पिता के लंगर से बाल लंगर को स्वतंत्र रूप से समायोजित किया जा सकता है । विशेष रूप से translate, translateXऔर translateYकार्यों को एक अलग संरेखण का उपयोग करने के लिए बाल बॉक्स को टक्कर देने के लिए उपयोग किया जाएगा।

कारण यह काम करता है क्योंकि में प्रतिशत translateमूल्य के सापेक्ष हैं बच्चे , जबकि में प्रतिशत top, bottom, left, और rightगुण के सापेक्ष हैं माता पिता ।

लंबवत संरेखण

का उपयोग करके transform: translateY(), बच्चे के संरेखण को ऊपर या नीचे टकराया जा सकता है।

transform: translateY(0) बच्चे को छोड़ देगा जहां वह है, और आम तौर पर बहुत उपयोगी नहीं है।

जब बच्चा माता-पिता के शीर्ष पर लंगर डालेगा, transform: translateY(-50%)तो अपने केंद्र में बच्चे को संरेखित करेगा:

.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  top: 0;
  transform: translateY(-50%);
}

<div class="container">
  <div class="box"></div>
</div>

इसी तरह, जब बच्चे को माता-पिता के नीचे लंगर डाला जाता है, तो वह transform: translate(50%)अपने केंद्र में बच्चे को संरेखित करेगा:

.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  bottom: 0;
  transform: translateY(50%);
}

<div class="container">
  <div class="box"></div>
</div>

इसका मतलब यह भी है कि top: 100%इसके बराबर है bottom: 0; transform: translateY(100%):

.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  bottom: 0;
  transform: translateY(100%);
}

<div class="container">
  <div class="box"></div>
</div>

क्षैतिज संरेखण

उपयोग करते हुए transform: translateX(), बच्चे के संरेखण को बाएं या दाएं से टकराया जा सकता है।

transform: translateX(0) उस बच्चे को छोड़ देगा जहाँ वह डिफ़ॉल्ट रूप से है।

जब बच्चे को माता-पिता के बाईं ओर लंगर डाला जाता है, तो transform: translateX(-50%)वह अपने केंद्र में बच्चे को संरेखित करेगा:

.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  transform: translateX(-50%);
}

<div class="container">
  <div class="box"></div>
</div>

इसी तरह, जब बच्चे को माता-पिता के अधिकार के लिए लंगर डाला जाता है, तो वह transform: translateX(50%)अपने केंद्र में बच्चे को संरेखित करेगा:

.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  right: 0;
  transform: translateX(50%);
}

<div class="container">
  <div class="box"></div>
</div>

left: 100%के बराबर है right: 0; transform: translateX(100%)।

केंद्र लंगर

केंद्रित करना सिर्फ बच्चे को माता-पिता के मध्य में संरेखित करने का विषय है, और फिर बच्चे के मूल को जगह में उछाल देना।

.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <div class="box"></div>
</div>

समरूपता के कारण, आप भी उपयोग कर सकते हैं:

bottom: 50%;
right: 50%;
transform: translate(50%, 50%);

Comments

स्थिति पर बहुत अधिक सामान्य उत्तर। हो सकता है कि यह सीएसएस पोजिशनिंग डॉक्यूमेंटेशन को बनाने के लिए एक शानदार तरीका हो। संपादन stackoverflow.com/documentation/css/935/…

— जोन्सग

@zzzzBov यदि आप अपनी सामग्री लेते हैं और उसे उल्टा करते हैं, तो सबसे अधिक प्रासंगिक सामग्री को पहले प्रस्तुत करना और फिर उसे धीरे-धीरे अधिक सामान्य रूप में विस्तारित / व्याख्या करना, यह कहीं अधिक प्रेरक होगा, क्योंकि प्रत्येक पाठक जल्दी रोक सकता है और अभी भी संदर्भ में बेहतर समझ रख सकता है। सवाल का।

— jpaugh

@ ज़ापो, हाँ, अभी भी यहाँ काफी सुधार की आवश्यकता है, न कि कम से कम उदाहरणों को कम करने के लिए, बेहतर पारस्परिकता के साथ, कम दोहरावदार होने के लिए। आपकी प्रतिक्रिया के लिए धन्यवाद, और मैं देखूंगा कि मैं अपने अगले मसौदे में इसे शामिल करने के बारे में क्या कर सकता हूं।

— zzzzBov

बहुत अच्छे धन्यवाद! मुझे लगता है कि कोड के साथ, लेखन या तो पाठक या लेखक को पसंद करता है --- लेकिन दोनों नहीं। चियर्स!

— जौफॉ