किसी तत्व को क्षैतिज और लंबवत रूप से कैसे केंद्रित करें

Question

मैं अपनी टैब सामग्री को लंबवत रूप से केंद्र में लाने का प्रयास कर रहा हूं, लेकिन जब मैं CSS शैली जोड़ता हूं display:inline-flex, तो क्षैतिज पाठ-संरेखण गायब हो जाता है।

मैं अपने प्रत्येक टैब के लिए दोनों पाठ संरेखण x और y कैसे बना सकता हूं?

* { box-sizing: border-box; }
#leftFrame {
  background-color: green;
  position: absolute;
  left: 0;
  right: 60%;
  top: 0;
  bottom: 0;
}
#leftFrame #tabs {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25%;
}
#leftFrame #tabs div {
  border: 2px solid black;
  position: static;
  float: left;
  width: 50%;
  height: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
}

<div id=leftFrame>
  <div id=tabs>
    <div>first</div>
    <div>second</div>
  </div>
</div>

Comments

चौड़ाई और ऊंचाई केंद्र div के बिना प्रदर्शन प्रकार फ्लेक्स और सीएसएस 2 डी ट्रांसफॉर्मेशन का उपयोग करके नवीनतम सीएसएस विधियाँ क्षैतिज और ऊर्ध्वाधर रूप से केवल सीएसएस विधियों freakyjolly.com/

— कोड जासूस

Answer 1

• दृष्टिकोण 1 - transform translateX/ translateY:

  उदाहरण यहाँ / पूर्ण स्क्रीन उदाहरण

  में समर्थित ब्राउज़रों (उनमें से ज्यादातर), तो आप उपयोग कर सकते हैं top: 50%/ left: 50%के साथ संयोजन में translateX(-50%) translateY(-50%)गतिशील रूप से खड़ी करने के लिए / क्षैतिज तत्व पर केंद्रित हों।

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

<div class="container">
    <span>I'm vertically/horizontally centered!</span>
</div>

---

• दृष्टिकोण 2 - फ्लेक्सबॉक्स विधि:

  उदाहरण यहाँ / पूर्ण स्क्रीन उदाहरण

  में समर्थित ब्राउज़रों , सेट displayकरने के लिए लक्षित तत्व की flexऔर उपयोग align-items: centerखड़ी केंद्रित के लिए और justify-content: centerक्षैतिज केंद्रित करने के लिए। बस अतिरिक्त ब्राउज़र समर्थन के लिए वेंडर उपसर्ग जोड़ना न भूलें ( उदाहरण देखें )।

html, body, .container {
    height: 100%;
}

.container {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
}

<div class="container"> 
  <span>I'm vertically/horizontally centered!</span>
</div>

---

• दृष्टिकोण 3 - table-cell/ vertical-align: middle:

  उदाहरण यहाँ / पूर्ण स्क्रीन उदाहरण

  कुछ मामलों में, आपको यह सुनिश्चित करना होगा कि html/ bodyतत्व की ऊंचाई निर्धारित है 100%।

  ऊर्ध्वाधर संरेखण के लिए, मूल तत्व width/ heightको 100%जोड़ें और जोड़ें display: table। फिर बच्चे तत्व के लिए, बदलने displayके लिए table-cellऔर जोड़ने vertical-align: middle।

  क्षैतिज केंद्रित के लिए, आप या तो text-align: centerपाठ और किसी भी अन्य inlineबच्चों के तत्वों को केंद्र में जोड़ सकते हैं। वैकल्पिक रूप से, आप उपयोग कर सकते हैं margin: 0 auto, यह मानते हुए कि तत्व blockस्तर है।

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

<section class="parent">
    <div class="child">I'm vertically/horizontally centered!</div>
</section>

---

• दृष्टिकोण 4 - 50%विस्थापन के साथ ऊपर से पूरी तरह से तैनात :

  उदाहरण यहाँ / पूर्ण स्क्रीन उदाहरण

  यह दृष्टिकोण मानता है कि पाठ में एक ज्ञात ऊँचाई है - इस उदाहरण में 18px,। 50%मूल तत्व के सापेक्ष बस ऊपर से तत्व को बिल्कुल स्थिति । नकारात्मक margin-topमान का उपयोग करें जो तत्व की ज्ञात ऊंचाई का आधा है, इस मामले में - -9px।

html, body, .container {
    height: 100%;
}

.container {
    position: relative;
    text-align: center;
}

.container > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -9px;
}

<div class="container">
    <p>I'm vertically/horizontally centered!</p>
</div>

---

• दृष्टिकोण 5 - line-heightविधि (कम से कम लचीली - सुझाई नहीं गई):

  यहाँ उदाहरण है

  कुछ मामलों में, मूल तत्व की एक निश्चित ऊंचाई होगी। ऊर्ध्वाधर केंद्र के लिए, आपको बस इतना करना होगा line-heightकि मूल तत्व की निर्धारित ऊंचाई के बराबर बाल तत्व पर एक मूल्य निर्धारित किया जाए।

  हालांकि यह समाधान कुछ मामलों में काम करेगा, लेकिन यह ध्यान देने योग्य है कि यह पाठ की कई पंक्तियों की तरह काम नहीं करेगा - जैसे ।

.parent {
    height: 200px;
    width: 400px;
    background: lightgray;
    text-align: center;
}

.parent > .child {
    line-height: 200px;
}

<div class="parent">
    <span class="child">I'm vertically/horizontally centered!</span>
</div>

Comments

हाँ जो काम करता है। मैंने पहले से ही css3 पर इनलाइन-फ्लेक्स का उपयोग किया था इसलिए मैं पूरी तरह से भूल गया कि इस aproach को सही तरीके से कैसे ले सकता हूं। मैं वास्तव में इसकी सराहना करता हूं, बहुत-बहुत धन्यवाद।

— शुजी

मैंने ऊपर दिए गए सभी "फुलस्क्रीन" उदाहरण को खोला, मैंने देखा कि ऊर्ध्वाधर संरेखण हमेशा स्क्रीन के निचले हिस्से के पास बहुत अधिक होता है (संकल्प 1920x1080 के साथ, लेबल स्क्रीन में 20 पिक्सेल बहुत कम है)। मैंने अपने वेबपेज में एप्रोच # 2 लागू किया और डिव का फुलस्क्रीन न होने पर भी यही समस्या आई। मेरे वेबपेज में समस्या और भी खराब है। (100px बहुत कम) ...

— AXMIM

आप माता-पिता और बच्चों में फ्लेक्सबॉक्स (IE9 +, [90% + ब्राउज़र मार्केट कवरेज] (caniuse.com/#feat=flexbox) में काम करता है) का उपयोग करके , दृष्टिकोण 6 को जोड़ना चाह सकते हैं । display: flexalign-self: center

— डैन डैस्केल्स्कु

मैंने थोड़ा दृष्टिकोण 2: jsfiddle.net/yeaqrh48/278 बदल दिया । नतीजतन, खिड़की की ऊंचाई को कम करके, पाठ दायरे से परे चला जाता है और यह देखना असंभव हो जाता है। इस समस्या को हल कैसे करें?

— २०:०४

@ josh-crozier बस अपनी सीएसएस में अपनी पोस्ट के लिंक के साथ एक वेबसाइट मिली xd

— zoran404

Answer 2

यदि CSS3 एक विकल्प है (या आपके पास एक कमबैक है) तो आप रूपांतरण का उपयोग कर सकते हैं:

.center {
    right: 50%;
    bottom: 50%;
    transform: translate(50%,50%);
    position: absolute;
}

ऊपर दिए गए पहले दृष्टिकोण के विपरीत, आप बाएं का उपयोग नहीं करना चाहते हैं: नकारात्मक अनुवाद के साथ 50% क्योंकि IE9 + में एक अतिप्रवाह बग है। एक सकारात्मक सही मूल्य का उपयोग करें और आप क्षैतिज स्क्रॉलबार नहीं देखेंगे।

Comments

मेरा मानना ​​है कि परिवर्तन transform: translateX(50%) translateY(50%);इसके बजाय होना चाहिए । मोज़िला ट्रांसफ़ॉर्म डॉक्स के अनुसार उपर्युक्त रूपांतर वाक्यगत रूप से सही नहीं है ।

— इरिक एच

@EirikH यकीन नहीं है कि आप क्या देख रहे थे, लेकिन यह वाक्यविन्यास ठीक है (और डॉक्स में ऐसा कहता है)। के अधिकांश transformमान जो कर सकते हैं एक एक्स और वाई मान ले दोनों और विशेष कार्यों के लिए बस एक लेने के लिए एक बुनियादी कार्य किया है।

— स्कॉट मार्कस

Answer 3

एक बॉक्स को लंबवत और क्षैतिज रूप से केंद्र में रखने का सबसे अच्छा तरीका दो कंटेनरों का उपयोग करना है:

Outher कंटेनर:

• होना चाहिए display: table;

आंतरिक कंटेनर:

• होना चाहिए display: table-cell;
• होना चाहिए vertical-align: middle;
• होना चाहिए text-align: center;

सामग्री बॉक्स:

• होना चाहिए display: inline-block;
• जब तक आप पाठ को केंद्रित नहीं करना चाहते, तब तक क्षैतिज पाठ-संरेखण को समायोजित करना चाहिए

डेमो:

body {
    margin : 0;
}

.outer-container {
    display: table;
    width: 80%;
    height: 120px;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Center this!
     </div>
   </div>
</div>

यह भी देखें फिडल !

पृष्ठ के मध्य में केंद्रित:

अपने पेज के बीच में अपनी सामग्री को केंद्रित करने के लिए, अपने outher कंटेनर में निम्न जोड़ें:

• position : absolute;
• width: 100%;
• height: 100%;

यहाँ उस के लिए एक डेमो है:

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Center this!
     </div>
   </div>
</div>

यह भी देखें फिडल !

Answer 4

यहाँ कैसे केंद्र के लिए 2 सरल फ्लेक्स गुणों का उपयोग करने के लिए है n 2 अक्ष पर divs:

• अपने कंटेनर की ऊँचाई निर्धारित करें: यहाँ शरीर को कम से कम 100vh पर सेट किया गया है।
• align-items: center ब्लॉकों को लंबवत रूप से केंद्र करेगा
• justify-content: space-around div के आसपास मुफ्त क्षैतिज स्थान वितरित करेगा

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

<div>foo</div>
<div>bar</div>

Answer 5

इस कोड स्निपेट को चलाएं और एक लंबवत और क्षैतिज रूप से संरेखित div देखें।

html,
body,
.container {
  height: 100%;
  width: 100%;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mydiv {
  width: 80px;
}

<div class="container">
  <div class="mydiv">h & v aligned</div>
</div>

Answer 6

मेरे लिए सबसे सरल और साफ समाधान CSS3 संपत्ति "ट्रांसफॉर्म" का उपयोग कर रहा है:

.container {
  position: relative;
}

.container a {
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);
}

<div class="container">
  <a href="#">Hello world!</a>
</div>

Answer 7

    .align {
        display: flex;
        width: 400px;
        height: 400px;
        border: solid 1px black;
        align-items: center;
        justify-content: space-around;
    }
    .align div:first-child {
        width: 20px;
        height: 20px;
        background-color: red;
        position: absolute; 
    }
    .align div {
        width: 20px;
        height: 20px;
        background-color: blue;
    }

    <div class='align'>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

पहले बच्चे को केंद्र में लंबवत और क्षैतिज रूप से संरेखित किया जाएगा

Answer 8

एक पृष्ठ में div को केंद्रित करने के लिए check the fiddle link

#vh {
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 200px;
    height: 200px;
    background: white;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

<div id="vh">Div to be aligned vertically</div>

अपडेट दूसरा विकल्प फ्लेक्स बॉक्स का उपयोग करना है check the fiddle link

.vh {
    background-color: #ddd;
    height: 200px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

Answer 9

नीचे वांछित परिणाम प्राप्त करने के लिए फ्लेक्स-बॉक्स दृष्टिकोण है

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Flex-box approach</title>
<style>
  .tabs{
    display: -webkit-flex;
    display: flex;
    width: 500px;
    height: 250px;
    background-color: grey;
    margin: 0 auto;
    
  }
  .f{
    width: 200px;
    height: 200px;
    margin: 20px;
    background-color: yellow;
    margin: 0 auto;
    display: inline; /*for vertically aligning */
    top: 9%;         /*for vertically aligning */
    position: relative; /*for vertically aligning */
  }
</style>
</head>
<body>

    <div class="tabs">
        <div class="f">first</div>
        <div class="f">second</div>        
    </div>

</body>
</html>

Answer 10

तालिका का उपयोग करने के लिए एक और तरीका है:

<div style="border:2px solid #8AC007; height:200px; width:200px;">
  <table style="width:100%; height:100%">
    <tr style="height:100%">
      <td style="height:100%; text-align:center">hello, multiple lines here, this is super long, and that is awesome, dude</td>
    </tr>
  </table>
</div>

Answer 11

एक तत्व को लंबवत और क्षैतिज रूप से केन्द्रित करने के लिए हम नीचे उल्लिखित गुणों का भी उपयोग कर सकते हैं।

यह सीएसएस गुण -आइटम को लंबवत रूप से संरेखित करता है और निम्नलिखित मानों को स्वीकार करता है:

flex-start : आइटम कंटेनर के शीर्ष पर संरेखित होते हैं।

flex-end : आइटम कंटेनर के नीचे संरेखित करते हैं।

केंद्र : आइटम कंटेनर के ऊर्ध्वाधर केंद्र में संरेखित होते हैं।

आधार रेखा : आइटम कंटेनर के आधार रेखा पर प्रदर्शित होते हैं।

खिंचाव : कंटेनर को फिट करने के लिए आइटम फैलाए जाते हैं।

यह CSS संपत्ति औचित्य-सामग्री है , जो क्षैतिज रूप से आइटम संरेखित करती है और निम्नलिखित मूल्यों को स्वीकार करती है:

flex-start : आइटम कंटेनर के बाईं ओर संरेखित होते हैं।

flex-end : आइटम कंटेनर के दाईं ओर संरेखित करते हैं।

केंद्र : आइटम कंटेनर के केंद्र में संरेखित होते हैं।

space-बीच : आइटम उनके बीच समान रिक्ति के साथ प्रदर्शित करते हैं।

space-around : आइटम उनके चारों ओर समान रिक्ति के साथ प्रदर्शित होते हैं।

Answer 12

ग्रिड सीएसएस दृष्टिकोण

#wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}
.main {
    background-color: #444;
}

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box main"></div>
</div>

Answer 13

निम्नलिखित नए और आसान समाधान का पालन करने की आवश्यकता है :

  .centered-class {
      align-items: center;
      display: flex;
      justify-content: center;
      width: 100vw;
      height: 100vh;
    }

<div class="centered-class">
  I'm in center vertically and horizontally.
</div>

Answer 14

• दृष्टिकोण ६

/*Change units to "%", "px" or whatever*/

#wrapper{
  width: 50%;
  height: 70vh;
  background: rgba(0,0,0,.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
#left{
  width: 50%;
  height: 50vh;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: red;
}
#right{
  width: 50%;
  height: 50vh;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: green;
}
.txt{
  text-align: center;
  line-height: 50vh;
}

<div id="wrapper">
   <div id="left" class="txt">Left</div>
   <div id="right" class="txt">Right</div>
</div>

    .container{ 
               width: 50%;  //Your container width here
               height: 50%; //Your container height here
               position: absolute; 
               top: 0; 
               right: 0;  
               bottom: 0; 
               left: 0; 
               margin: auto;
    }

Answer 15

बस ऊपर, नीचे, बाएं और दाएं को 0 करें।

<html>
<head>
<style>
<div> 
{
position: absolute;
margin: auto;
background-color: lightblue;
width: 100px;
height :100px;
padding: 25px;
top :0;
right :0;
bottom:0;
left:0;
}


</style>
</head>
<body>

<div> I am in the middle</div>

</body>
</html>

Answer 16

आप सीएसएस (अपने तत्व display:inline-grid+ grid-auto-flow: row;) ग्रिड और फ्लेक्स बॉक्स (मूल तत्व display:flex;) का उपयोग करके इसे प्राप्त कर सकते हैं ,

नीचे देखें स्निपेट

#leftFrame {
  display: flex;
  height: 100vh;
  width: 100%;
}

#tabs {
  display: inline-grid;
  grid-auto-flow: row;
  grid-gap: 24px;
  justify-items: center;
  margin: auto;
}

html,body {
  margin:0;
  padding:0;
}

<div>
<div id=leftFrame>
  <div id=tabs>
    <div>first</div>
    <div>second</div>        
  </div>
</div>
</div>

Answer 17

स्रोत लिंक

विधि 1) प्रदर्शन प्रकार फ्लेक्स

.child-element{
     display: flex;
     justify-content: center;
     align-items: center;
}

विधि 2) 2D ट्रांसफ़ॉर्म

.child-element {
   top: 50%;
   left: 50%;
   transform: translate(-50% , -50%);
   position: absolute;
}

अन्य विधियाँ यहाँ देखें

Answer 18

ऊर्ध्वाधर और क्षैतिज रूप से एक div को केन्द्रित करने का सबसे आसान तरीका इस प्रकार है:

<div style="display: table; width: 200px; height: 200px; border: 1px solid black;">
    <div style="display: table-cell; vertical-align: middle; text-align: center;">
        Text Here
    </div>
</div>

एक और उदाहरण :

.parent {
    display: table; 
    width: 100%; 
    height: 100%;
}

.child {
    display: table-cell; 
    vertical-align: middle;
    text-align: center;
}


<div class="parent">
    <div class="child">
        <h4><u>SERVICE IN BANGLADESH FLEET RESERVE <br> AND <br> RE-ENGAGEMENT ORDER FOR DEFENCE SERVICE</u></h4>
    </div>
</div>

Answer 19

यह एक संबंधित समस्या है जिसे खोजते समय लोग इस पृष्ठ पर आ सकते हैं: जब मैं एक (100px वर्ग) "प्रतीक्षा .." के लिए एक डिव को केन्द्रित करना चाहता हूँ तो "एनिमेटेड gif का उपयोग करता हूँ:

  .centreDiv {
        position: absolute;
        top: calc(50vh - 50px);
        top: -moz-calc(50vh - 50px);
        top: -webkit-calc(50vh - 50px);
        left: calc(50vw - 50px);
        left: -moz-calc(50vw - 50px);
        left: -webkit-calc(50vw - 50px);
        z-index: 1000; /*whatever is required*/
    }

Answer 20

यदि आप इसके बिना पसंद करते हैं :
फ्लेक्सबॉक्स / ग्रिड / टेबल
या इसके बिना :
ऊर्ध्वाधर-संरेखित: मध्य

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

एचटीएमएल

<div class="box">
  <h2 class="box_label">square</h2>
</div>

सीएसएस

.box {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  text-align: center;
  border: 1px solid black;
}

.box_label {
  box-sizing: border-box;
  display: inline-block;
  transform: translateY(50%);
  text-align: center;
  border: 1px solid black;
}

Answer 21

यह काम करना चाहिए

.center-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
}

<div class="center-div">Center Div</div>

Answer 22

सरल ! टेक्स्ट पर कंटेनर और मार्जिन ऑटो पर डिस्प्ले फ्लेक्स का उपयोग करें !!!!

#hood{

 width : 300px;
 height: 100px;
 border: solid 1px #333333;
 display: flex; 
}

#hood span{

  margin: auto
}



<html>
<head></head>
    <body>
        <div id="hood">
            <span> I Am Centered</span>
        </div>
    </body>
</html>

डेमो: https://jsfiddle.net/ay95f08g/

परीक्षण किया: सफारी, क्रोम, फ़ायरफ़ॉक्स और ओपेरा MacOs Mojave पर। (25 फरवरी 2019 को सभी अंतिम अपडेट)

Answer 23

ऐसा ही करने के लिए कई थे। आप पृष्ठ के मध्य में div बनाने के लिए निम्न विधि का उपयोग कर सकते हैं।

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

<div class="center-box">
  <h1>Text in center of page</h1>
</div>

चीयर्स!

Answer 24

सबसे सरल flexboxदृष्टिकोण:

किसी एकल तत्व को लंबवत और क्षैतिज रूप से केंद्र में रखने का सबसे आसान तरीका है कि इसे एक फ्लेक्स आइटम बनाया जाए और इसके मार्जिन को autoनिम्न पर सेट किया जाए :

यदि आप एक फ्लेक्स आइटम पर ऑटो मार्जिन लागू करते हैं, तो वह आइटम फ्लेक्स कंटेनर में अतिरिक्त स्थान पर कब्जा करने के लिए स्वचालित रूप से अपने निर्दिष्ट मार्जिन का विस्तार करेगा ...

.flex-container {
  height: 150px;
  display: flex;
}

.flex-item {
  margin: auto;
}

<div class="flex-container">
  <div class="flex-item">
    This should be centered!
  </div>
</div>

प्रत्येक दिशा में हाशिये का यह विस्तार तत्व को उसके कंटेनर के ठीक बीच में धकेल देगा ।