Div Center Kaise Kare.How to do Div Center.

नमस्कार दोस्तों स्वागत है हमारे Premi Coder वेबसाइट पर आज की इस पोस्ट में हम आपको div को सेंटर करने के बारे में जानकारी देंगे। Div को कैसे सेंड करते हैं उसका कोड भी प्रोवाइड करेंगे जिसको रन करके एग्जांपल देख सकते हैं।

div Center Kaise Kare.

अब दोस्तों जान लेते हैं कि आप div को कैसे center कर सकते हो।

दोस्तों आप इस इमेज को देखा और समझ सकते हो। ऊपर इमेज दी हुई जानकारी देख सकते हैं उसमें भी div center के बारे में जानकारी दी है।

Demo👇 इस शॉर्टवडियो में आप देख सकते हो।

Div Center Kaise Kare Example Code.

दोस्तों जो हमने code दिया है उसको आपने कोई भी एचटीएमएल कोड Editor जाकर इस कोड को पेस्ट करके Run करें।

<!DOCTYPE html>
<html>
    <head>
        <title>Center Div</title><style>
           #A,#B,#C,#D,#E,#F{height:300px;width:340px;border:2px solid cyan;margin:3px auto;background:blue;}
          :is(#A,#B,#C,#D,#E,#F) :is(.AB,.AC,.AD,.AE,.AF,.AG){height:150px;width:160px;border:2px solid yellow;background:white;text-align:center;align-content:center;}
          
          h3{margin-left:4px;color:white;text-shadow:3px 3px 4px blue ,-1.5px 1.5px 2px red;}
 /*css box 1 Example*/      #A{display:flex;justify-content:center;align-items:center;}
 /*css box 2 Example*/        #B{display:grid;place-items:center;}
 /*css box 3 Example*/  
 #C{position:relative;}
 #C .AD{position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%, -50%);}
  /*css box 4 Example*/  
 #D{display:flex;}
 #D .AE{margin:auto;}
  /*css box 5 Example*/  
  #E{display:grid;}
 #E .AF{margin:auto;}
 #F .AG{margin:75px auto;}
                  
        </style>
    </head>
    <body>
    <h3>flexbox का उपयोग करके।</h3>
      <div id="A">
    <div class="AB">A</div>
      </div> 
      <h3>grid का उपयोग करके।</h3>
         <div id="B">
    <div class="AC">B</div>
      </div> 
      <h3>4.Position Absolute+Transform</h3>
         <div id="C">
    <div class="AD">C</div>
      </div> 
      <h3>3.margin Auto का उपयोग करके।</h3>
         <div id="D">
    <div class="AE">D</div>
      </div> 
      <h3>3. Margin Auto(Horizontally Center)</h3>
         <div id="E">
    <div class="AF">E</div>
      </div> 
      <h3>height Ka 1/4 का उपयोग करके।</h3>
      <div id="F">
    <div class="AG">F</div>
      </div> 
    </body>
</html>

दोस्तों मैं आशा करता हूं कि मेरे द्वारा दी गई जानकारी आपको पसंद आएगी। अगर आपका कोई भी डाउट है तो आप कमेंट कर सकते हो।