অনুভূমিক এবং উল্লম্বভাবে কোনও উপাদানকে কীভাবে কেন্দ্র করবেন

Question

আমি আমার ট্যাবগুলি সামগ্রীতে উল্লম্বভাবে কেন্দ্র করার চেষ্টা করছি, কিন্তু আমি যখন সিএসএস স্টাইল যুক্ত করি 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

প্রদর্শন টাইপ আনমন এবং CSS 2D ব্যবহার সর্বশেষ সিএসএস পদ্ধতি প্রস্থ ও উচ্চতা কেন্দ্র DIV আছে অনুভূমিকভাবে ছাড়া রুপান্তর এবং উল্লম্বভাবে শুধুমাত্র সিএসএস পদ্ধতি ব্যবহার করে 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 এ ইনলাইন-ফ্লেক্স ব্যবহার করেছি তাই আমি এই অ্যাপ্রোচকে সঠিকভাবে কীভাবে গ্রহণ করব সে সম্পর্কে আমি সম্পূর্ণরূপে ভুলে গিয়েছিলাম। আমি সত্যিই এটি প্রশংসা করি, আপনাকে অনেক ধন্যবাদ।

— শুজি

আমি উপরের সমস্ত "ফুলস্ক্রিন" উদাহরণটি খুললাম, আমি লক্ষ্য করেছি যে উল্লম্ব সারিবদ্ধতা সর্বদা পর্দার নীচে খুব বেশি থাকে (1920x1080 রেজোলিউশন সহ, পর্দায় লেবেলটি 20 পিক্সেল খুব কম)। আমি আমার ওয়েবপৃষ্ঠায় # 2 পদ্ধতির প্রয়োগ করেছি এবং ডিভি পূর্ণস্ক্রিন না হলেও এমনকি একই সমস্যা পেয়েছি। সমস্যাটি আমার ওয়েবপৃষ্ঠায় আরও খারাপ। (100px খুব কম) ...

— এক্সএমআইএম

আপনি এপ্রোচ 6 যোগ করতে পারেন flexbox ব্যবহার (IE9 + এ কাজ, [90% ব্রাউজারের বাজারে কভারেজ] (caniuse.com/#feat=flexbox)): display: flexপিতা বা মাতা, এবং align-self: centerশিশুদের মধ্যে।

— ড্যান ড্যাসকলেসকু

আমি কিছুটা অ্যাপ্রোচ 2: jsfiddle.net/yeaqrh48/278 পরিবর্তন করেছি । ফলস্বরূপ, উইন্ডোর উচ্চতা হ্রাস করে, পাঠ্যটি ক্ষেত্রের বাইরে চলে যায় এবং এটি দেখা অসম্ভব হয়ে যায়। এই সমস্যার সমাধান কিভাবে?

— ওল্লাজারেভ

@ জোশ-

— ক্রোজায়ার স্রেফ

Answer 2

সিএসএস 3 যদি একটি বিকল্প হয় (বা আপনার ফ্যালব্যাক রয়েছে) তবে আপনি ট্রান্সফর্ম ব্যবহার করতে পারেন:

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

উপরের প্রথম পদ্ধতির বিপরীতে, আপনি বাম ব্যবহার করতে চান না: %ণাত্মক অনুবাদ সহ 50%, কারণ আই 9 + এ ওভারফ্লো বাগ রয়েছে। একটি ইতিবাচক সঠিক মানটি ব্যবহার করুন এবং আপনি অনুভূমিক স্ক্রোলবারগুলি দেখতে পাবেন না।

Comments

আমি বিশ্বাস করি পরিবর্তনের transform: translateX(50%) translateY(50%);পরিবর্তে হওয়া উচিত । উপরের রূপান্তরটি মোজিলা ট্রান্সফর্ম ডক্স অনুসারে সিনথেটিকভাবে সঠিক নয় ।

— এরিক এইচ

@ আইরিখ আপনি নিশ্চিতভাবে কী দেখছিলেন তা নিশ্চিত নন, তবে সেই বাক্য গঠনটি ঠিক আছে (এবং ডক্সেও তাই বলেছেন)। এক্স এবং ওয়াইয়ের মান নিতে পারে এমন বেশিরভাগ transformমানগুলির মধ্যে একটি এবং দুটি বিশেষায়িত ফাংশন গ্রহণের জন্য একটি প্রাথমিক ফাংশন রয়েছে যা কেবল একটি নিতে পারে।

— স্কট মার্কাস

Answer 3

উভয় অনুভূমিক এবং অনুভূমিকভাবে কোনও বাক্সকে কেন্দ্র করার সর্বোত্তম উপায় হ'ল দুটি পাত্রে ব্যবহার করা:

বহির্মুখী ধারক:

• উচিত 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>

আরও দেখুন এই বেহালার !

পৃষ্ঠার মাঝখানে কেন্দ্রীকরণ:

আপনার পৃষ্ঠার মাঝখানে আপনার সামগ্রীকে কেন্দ্র করতে, আপনার বহির্মুখী ধারকটিতে নিম্নলিখিতটি যুক্ত করুন:

• 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 সহজ ফ্লেক্স বৈশিষ্ট্যগুলি কীভাবে ব্যবহার করবেন তা এখানে :

• আপনার ধারকটির উচ্চতা নির্ধারণ করুন: এখানে শরীরটি কমপক্ষে 100vh হতে সেট করা হয়েছে।
• align-items: center উল্লম্বভাবে ব্লকগুলি কেন্দ্র করবে
• justify-content: space-around ডিভিএসের চারপাশে বিনামূল্যে অনুভূমিক স্থান বিতরণ করবে

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

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

Answer 5

এই কোড স্নিপেট চালান এবং একটি উল্লম্ব এবং অনুভূমিকভাবে সারিবদ্ধ বিভাগ দেখুন।

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

কোনও পৃষ্ঠায় ডিভকে কেন্দ্র করে 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

উল্লিখিত এবং অনুভূমিকভাবে কোনও উপাদানকে কেন্দ্র করতে আমরা নীচে উল্লিখিত বৈশিষ্ট্যগুলিও ব্যবহার করতে পারি।

এই সিএসএস বৈশিষ্ট্যটি আইটেমগুলিকে উল্লম্বভাবে সারিবদ্ধ করে এবং নিম্নলিখিত মানগুলি গ্রহণ করে:

ফ্লেক্স-স্টার্ট : আইটেমগুলি ধারকটির শীর্ষে প্রান্তিক হয়।

ফ্লেক্স-এন্ড : আইটেমগুলি ধারকটির নীচে প্রান্তিক হয়।

কেন্দ্র : আইটেমগুলি ধারকটির উল্লম্ব কেন্দ্রে সারিবদ্ধ হয়।

বেসলাইন : আইটেমগুলি প্রদর্শন করা হয়।

প্রসারিত : পাত্রে ফিট করার জন্য আইটেমগুলি প্রসারিত করা হয়।

এই সিএসএস সম্পত্তি ন্যায্যতা-সামগ্রী , যা আইটেমগুলিকে আনুভূমিকভাবে প্রান্তিককরণ করে এবং নীচের মানগুলি গ্রহণ করে:

আনমন-স্টার্ট : আইটেমগুলি ধারকটির বাম দিকে সারিবদ্ধ হয়।

আনমন-এন্ড : আইটেমগুলি ধারকটির ডান দিকে প্রান্তিক হয়।

কেন্দ্র : আইটেমগুলি ধারকটির সারিবদ্ধ হয়।

স্থান-মধ্যে : আইটেমগুলি তাদের মধ্যে সমান ব্যবধানের সাথে প্রদর্শন করে।

স্থান-চারদিকে : চারপাশে সমান ব্যবধান সহ আইটেমগুলি প্রদর্শিত হয়।

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

• অ্যাপ্রোচ 6

/*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) 2 ডি ট্রান্সফর্ম

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

অন্যান্য পদ্ধতি এখানে দেখুন

Answer 18

উভয় উল্লম্ব এবং অনুভূমিকভাবে কোনও কেন্দ্রকে কেন্দ্র করার সবচেয়ে সহজ উপায়:

<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 বর্গ) "অপেক্ষারত .." এর জন্য একটি ডিভকে কেন্দ্র করতে চাই যখন আমি ব্যবহার করি:

  .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

আপনি এটা পছন্দ করেন ছাড়া :
flexbox / গ্রিড / টেবিল
বা ছাড়া :
উল্লম্ব প্রান্তিককরণ: মধ্য

আপনি করতে পারেন:

এইচটিএমএল

<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/

পরীক্ষিত: ম্যাকওস মোজভেভে সাফারি, ক্রোম, ফায়ারফক্স এবং অপেরা। (25 শে ফেব্রুয়ারী 2019 এ সমস্ত শেষ আপডেট)

Answer 23

অনেকগুলি একই কাজ করতে হয়েছিল। পৃষ্ঠার মাঝখানে ডিভ তৈরির জন্য আপনি নিম্নলিখিত পদ্ধতিটি ব্যবহার করতে পারেন।

.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>

প্রতিটি দিকের মার্জিনের এই সম্প্রসারণ উপাদানটিকে তার ধারকটির ঠিক মাঝখানে চাপ দেবে।