কিভাবে সমস্ত ব্রাউজারের জন্য উল্লম্বভাবে একটি কেন্দ্র কেন্দ্র করবেন?

1366

আমি divসিএসএস দিয়ে উল্লম্বভাবে কেন্দ্র করতে চাই । আমি টেবিল বা জাভাস্ক্রিপ্ট চাই না, কেবল খাঁটি সিএসএস চাই। আমি কিছু সমাধান পেয়েছি, কিন্তু তাদের সমস্তের মধ্যেই ইন্টারনেট এক্সপ্লোরার 6 সমর্থন অনুপস্থিত।

<body>
    <div>Div to be aligned vertically</div>
</body>

কীভাবে আমি divইন্টারনেট এক্সপ্লোরার 6 সহ সমস্ত বড় ব্রাউজারগুলিতে উল্লম্বভাবে কেন্দ্র করতে পারি ?

css  cross-browser  alignment  vertical-alignment  centering 
— বুরাক এরডেম
সূত্র
25
@ মারকোডেমিও লোকেরা কি এখানে নিয়মিত tablesলেআউটের জন্য নিয়ত ভ্রান্ত হন না?
— Chud37
14
@ চুদ 37: এটি আপনাকে যা করতে হবে তা নির্ভর করে, লেআউটের টেবিলগুলি সাধারণত বহুমুখী এবং কোড টাইপ করতে দীর্ঘায়িত হয় না, সিএসএসের সাহায্যে আপনি সহজেই একটি 2 টি কলস বিন্যাসকে 3/4/5 সোলস বিন্যাস ইত্যাদিতে পরিবর্তন করতে পারেন তবে এই ক্ষেত্রে ভিন্ন, এমন একটি সাধারণ কাজের জন্য কয়েক ডজন সিএসএস টিপস-ট্রিকস ব্যবহার করে যা নিখুঁত ক্রস-ব্রাউজার টেবিল দিয়ে সম্পন্ন করা যায়, এটি দরজা ব্যবহারের পরিবর্তে উইন্ডো দিয়ে আপনার বাড়িতে প্রবেশ করার চেষ্টা করার মতো।
— মার্কো ডেমাইও
লোকেরা যদি পুরানো ব্রাউজার সমর্থন সম্পর্কে চিন্তা না করে তবে: ডেভিডওয়াল.স.এস.এস.এস.এস.- রূপিক- সেন্টার
— ক্যারোলিস pআরপন্নিকিস
1
css-versical-center.com এ ব্রাউজারের সামঞ্জস্যতার তথ্যের সাথে কিছু সমাধান রয়েছে
— EscapeNetscape
2
এটি করার প্রচুর উপায় এখানে রয়েছে css-tricks.com/centering-css-complete-guide
— মাইকেল ইউরিন

উত্তর:

1374

নীচে আমি সর্বদা চার্জযুক্ত সমাধানটি উল্লম্বভাবে এবং অনুভূমিকভাবে একটি নির্দিষ্ট-প্রস্থ, নমনীয় উচ্চতার সামগ্রী বাক্সকে কেন্দ্র করে গড়ে তুলতে পারি । এটি ফায়ারফক্স, অপেরা, ক্রোম এবং সাফারি এর সাম্প্রতিক সংস্করণগুলির জন্য পরীক্ষা করা এবং কাজ করা হয়েছিল।

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

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

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>
স্নিপেট প্রসারিত করুন

গতিশীল সামগ্রী সহ একটি কার্যকারী উদাহরণ দেখুন

আমি নমনীয়তা পরীক্ষা করার জন্য কিছু গতিশীল সামগ্রী তৈরি করেছি এবং এটির সাথে যদি কেউ কোনও সমস্যা দেখেন তবে তা জানতে আগ্রহী। এটি কেন্দ্রিক ওভারলেগুলির জন্যও ভাল কাজ করা উচিত - লাইটবক্স, পপ-আপ ইত্যাদি

— Billbad
সূত্র
কোনও "পরম" বাইরের ডিআইভি ব্যতীত, পৃষ্ঠার যে কোনও বিষয়বস্তু পুরো ব্লকটিকে নীচে নামিয়ে দেবে। এটি অন্য পৃষ্ঠাগুলির তুলনায় এটি আরও স্বতন্ত্র করে তোলে।
— বিলবাদ
9
.outer {position:absolute;width:100%;height:100%}প্রয়োজন হয় না, তারা এখানে কেবল প্রদর্শন করার জন্য। আমাদের কেবল দরকার display:table, যদি কেউ আমার মতো বিভ্রান্ত হয়।
— নির্লজ্জ
আমি লক্ষ্য করেছি যে স্ক্রোল বারগুলি এড়াতে এটির 99% প্রয়োজন। আরও গুরুত্বপূর্ণ, এটি কেবল প্রথম দুটি ডিভ নিয়ে কাজ করে, বলুন .outerএবং রাখুন middleএবং স্পষ্টতই .innerএবং এর শৈলী উপেক্ষা করুন । আমি জানিনা কীসের বিন্দু margin-left, margin-rightঅটোতে সেট করুন যেহেতু এটি উপাদানটিকে অনুভূমিকভাবে কেন্দ্র করে না ?? !!!
— ব্যবহারকারী 10089632
অপসারণ width: 100%;এবং এটিকে যুক্ত margin: 0 autoকরে .outerচলক প্রস্থকেও অনুমতি দেয়।
— রোকোকো
@ ব্যবহারকারী 10089632 না, এটি প্রস্থ বা উচ্চতা নয় তবে অবস্থানের বিষয়। top: 0; left 0;অনুপস্থিত, ক্রোম অন্তত যা সেট করে ডিফল্ট 1. হয়
— মাইকেল Woliński
280

আরও একটি আমি তালিকায় দেখতে পাচ্ছি না:

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}
  • ক্রস ব্রাউজার (ইন্টারনেট এক্সপ্লোরার 8 সহ - হ্যাক ছাড়াই ইন্টারনেট এক্সপ্লোরার 10!)
  • শতাংশ এবং ন্যূনতম / সর্বোচ্চ- এর সাথে প্রতিক্রিয়াশীল
  • প্যাডিং নির্বিশেষে কেন্দ্রীভূত (বক্স-আকার দেওয়ার ছাড়াই!)
  • heightঅবশ্যই ঘোষণা করতে হবে ( পরিবর্তনশীল উচ্চতা দেখুন )
  • overflow: autoসামগ্রী স্পিলওভার প্রতিরোধের জন্য প্রস্তাবিত সেটিং (ওভারফ্লো দেখুন)

উত্স: সিএসএসে পরম অনুভূমিক এবং উল্লম্ব কেন্দ্রিক

— Yisela
সূত্র
7
এটি আমার পক্ষে কাজ করেছে, তবে ক্রোমে নির্দিষ্ট কারণে আমার প্রস্থ এবং উচ্চতা থাকা দরকার
— রায়ান নেল
1
ধন্যবাদ. আমার একটি স্থির দরকার ছিল যেখানে পিক্স উচ্চতা বা প্রস্থ গণনা করার দরকার নেই এবং এটি পুরোপুরি কাজ করেছে।
— জিএফলে 83
8
দুর্দান্ত সমাধান, বিশেষত কারণ আপনার পিতামাতার
— ডিভ
1
উচ্চতা স্থির না করা থাকলে এটি প্রসারিত করে, অন্যটি ছাড়াও: চমৎকার সমাধান
— বার্ট বার্গ
আপনার যদি প্রস্থ এবং উচ্চতা 100% নয় তবে ব্যবহার করুনmargin: auto;
— চার্লস এল
253

সহজ উপায়টি হ'ল সিএসএসের নিম্নলিখিত 3 লাইন হবে :

1) অবস্থান: আপেক্ষিক;

2) শীর্ষ: 50%;

3) রূপান্তর: অনুবাদ Y (-50%);

নিম্নলিখিতটি একটি উদাহরণ :

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>
স্নিপেট প্রসারিত করুন

— DrupalFever
সূত্র
4
দ্রষ্টব্য: বাহ্যিক ডিভের উচ্চতা "ন্যূনতম উচ্চতা: 170px" দিয়ে সেট করা থাকলে সঠিকভাবে কাজ করে না
— বার্ট বার্গ
3
জেড-ইনডেক্সে হস্তক্ষেপ
— রিপার 234
4
কাজ করে না যখন heightবাইরের divহয় 100%। তারপরে শুধুমাত্র সাথে কাজ করে position: absolute;।
— আর্চ লিনাক্স টাক্স
1
আমি প্রথমে অন্য কোথাও এই সমাধানটি খুঁজে পেয়েছি, তবে বিশেষভাবে -webkit-transformবৈকল্পিকটির উল্লেখ করার জন্য এই বিশেষ উত্তরের অতিরিক্ত কুডোস, যা আমাকে এই পদ্ধতিটি ফ্যান্টমজে কাজ করার প্রয়োজন ছিল ... সংগ্রামের শেষ ঘন্টা তাই ধন্যবাদ!
— drmrbrewer
2
এটি সেরা উত্তর। এটি অবিশ্বাস্যরূপে সহজ, আইই 9 হিসাবে অনেক কিছু বিদ্যমান কাজ এবং ফাংশনগুলির সর্বনিম্ন পরিমাণের সাথে অস্থির হয়ে পড়েছে যা এখন পর্যন্ত কেউ ব্যবহার করে না। এই লোকটিকে আরও কিছু উপকার পেতে দাও!
— নিক স্টিল
136

প্রকৃতপক্ষে উল্লম্ব কেন্দ্রীকরণের জন্য আপনার দুটি ডিভ দরকার। বিষয়বস্তুযুক্ত ডিভের দৈর্ঘ্য এবং উচ্চতা থাকতে হবে।

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>
স্নিপেট প্রসারিত করুন

ফলাফল এখানে

— ভাদিম ওভচিনিকভ
সূত্র
4
এটি একটি পুরানো কৌশল ... শীর্ষ 50% এবং অভ্যন্তরের
— ডিভের
34
এটি ধরে নিচ্ছে যে ডিভের জন্য আপনার নির্দিষ্ট উচ্চতা রয়েছে। ডিভ যখন উচ্চতা পরিবর্তন করতে পারে তখন কাজ করবেন না।
— আন্দ্রে ফিগুয়েরেদো
116

আধুনিক ব্রাউজারগুলির জন্য এখন ফ্লেক্সবক্স সমাধানটি খুব সহজ উপায়, তাই আমি আপনার জন্য এটি প্রস্তাব দিই:

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background:green;
}

body, html{
  height:100%;
}
<div class="container">
    <div>Div to be aligned vertically</div>
</div>
স্নিপেট প্রসারিত করুন

— সন্তোষ খলসে
সূত্র
1
যদি আপনি একটি পেয়ে থাকেন তবে আপনি navbarউচ্চতাটি ব্যবহার করতে পারেন height: calc(100% - 55px)বা আপনার উচ্চতা যাই হোক না কেন ব্যবহার করতে পারেন navbar।
— অ্যাড্রিয়ান
আমাকে শরীর থেকে মার্জিন / প্যাডিংও সরিয়ে ফেলতে হয়েছিল
— বেন
সঙ্গে ভাল কাজ করে float। ধন্যবাদ।
— আমির এ। শাবানী
দয়া করে মনে রাখবেন এটি সম্ভবত "আরও পুরানো" মোবাইল সাফারি ব্রাউজারগুলিতে অদ্ভুত আচরণ করবে। উচ্চতার পরিবর্তে প্রস্তাবিত ব্যবহার হ'ল। কনটেনার ক্লাসের উপর নমনীয়
— নাইন
78

2020 সম্পাদনা করুন: আপনি যদি আইই 8 এর মতো পুরানো ব্রাউজারগুলি সমর্থন করতে চান তবে এটি ব্যবহার করুন (যা আপনাকে 😉 করতে অস্বীকার করা উচিত)। তা না হলে ফ্লেক্সবক্স ব্যবহার করুন।

এটি আমি খুঁজে পাওয়া সবচেয়ে সহজ পদ্ধতি এবং আমি এটি সর্বদা ব্যবহার করি ( jsFizz ডেমো এখানে )

এই নিবন্ধটির জন্য সিএসএস ট্রিকস থেকে ক্রিস কইয়ারকে ধন্যবাদ জানাই ।

html, body{
  height: 100%;
  margin: 0;
}
.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%; 
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>
স্নিপেট প্রসারিত করুন

সমর্থন IE8 দিয়ে শুরু হয়।

— আর্মেল লার্সিয়ার
সূত্র
পুরানো ব্রাউজারগুলির পক্ষে সমর্থন অস্বীকার করা, আমার জন্য সমাধানটি ফ্লেক্সবক্স নয় গ্রিড সিস্টেম ছিল। কনটেইনারটিতে কেন্দ্রের বিষয়বস্তুগুলি আমার জন্য কিছুটা বিরক্তিকর ছিল যে যখন এটি যখন উচ্চতায় খুব ছোট হয়ে যায় তখন স্ক্রোলবারটি দেখানোর প্রয়োজন হয় এবং কেন্দ্রিক সামগ্রীগুলি অন্যান্য সমস্ত পদ্ধতির সাথে স্ক্রোল অঞ্চলটি হারিয়ে ফেলছিল। ধারকটিতে আমি কেবল ব্যবহার করি: {প্রদর্শন: গ্রিড; সারিবদ্ধ-আইটেম: কেন্দ্র; } আশা করি এটি কারও সাহায্য করবে।
— tomasofen
63

অনেক গবেষণার পরে অবশেষে চূড়ান্ত সমাধানটি পেলাম। এটি ভাসমান উপাদানগুলির জন্য এমনকি কাজ করে। উৎস দেখুন 

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}
— ymakux
সূত্র
4
এটি সত্যই কার্যকরভাবে কাজ করে, আপনি যদি মনে রাখেন যে ধারক উপাদানটির অবশ্যই একটি স্পষ্ট বা স্পষ্ট উচ্চতা থাকতে হবে; jsfiddle.net/14kt53un সিএসএসে তুলনামূলকভাবে নতুন যারা তাদের জন্য একটি গৌণ গ্যাচা ।
— মার্টিন শট
6
সমস্ত উত্তরগুলির মধ্যে, এটি সবচেয়ে সহজ! আমি আশা করি অন্যরাও আপনার উত্তরটি দেখুন! ধন্যবাদ! যাইহোক, 50%আমার পক্ষে কাজ করেছেন (না -50%)
— কোডসি
অবিশ্বাস্য ছিল। কয়েক ঘন্টা অনুসন্ধানের পরে, এই আমার জন্য কাজ করেছিল। আমাকে অনুবাদ ওয়াই ব্যবহার করতে হয়েছিল (৫০%) আমি নিশ্চিত কেন, তবে এটি কার্যকর হয়েছিল। আমার ক্ষেত্রে, পিতামাতাকে এইএম ফর্ম ইঞ্জিন দ্বারা তৈরি করা হয়েছিল এবং আমি কেবলমাত্র নির্দিষ্ট কিছু শিশু উপাদানকে নিয়ন্ত্রণ করতে পারি।
— তারেকাহফ
41

ফ্লেক্সবক্স সমাধান

html, body { margin: 0; height: 100%; }

body {
  display: flex;
  align-items: center;
}
<div>This is centered vertically</div>
স্নিপেট প্রসারিত করুন

— রেজি পিঙ্কহাম
সূত্র
3
নোট justify-content: centerআইটেমগুলি অনুভূমিকভাবে পাশাপাশি কেন্দ্র করবে
— পিটার বার্গ
36

কোনও পৃষ্ঠায় ডিভকে কেন্দ্র করতে, ফিডাল লিঙ্কটি চেক করুন ।

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>
স্নিপেট প্রসারিত করুন

আরেকটি বিকল্প হ'ল ফ্লেক্স বক্স ব্যবহার করা, ফিডল লিঙ্কটি পরীক্ষা করুন ।

.vh {
    background-color: #ddd;
    height: 400px;
    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>
স্নিপেট প্রসারিত করুন

আর একটি বিকল্প হ'ল একটি সিএসএস 3 রূপান্তর ব্যবহার করা:

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>
স্নিপেট প্রসারিত করুন

— Nerdroid
সূত্র
3
@ আরমেলল্যারসিয়ার এটি ভুল। আপেক্ষিক ইউনিটগুলি শতাংশ %, emগুলি এবং remগুলি। পরম বা স্থির মানগুলি পিক্সেল বা পয়েন্ট। আপনি যে বিষয়টি উল্লেখ করছেন তা হ'ল "এটি কেবলমাত্র একটি উচ্চতা নিয়ে কাজ করে"। হাওয়েভার, যদিও মোস দ্বারা বর্ণিত এই পদ্ধতির একটি উচ্চতা প্রয়োজন, আপনি যখন এটি আপেক্ষিক ইউনিটগুলিতে ঘোষণা করেন তখন শতাংশই সেরা, কেন্দ্রিক ডিআইভিতে যে পরিমাণ সামগ্রী থাকে তা ডিআইভি তার সামগ্রীতে ফিট করার জন্য উল্লম্বভাবে প্রসারিত হবে তা নির্বিশেষে। এটাই এই পদ্ধতির সৌন্দর্য। অন্য ভাল জিনিস হ'ল এই পদ্ধতিটি আইই 8/9/10 তে কাজ করে যদি কেউ এখনও সেই ব্রাউজারগুলিকে সমর্থন করতে পারে।
— রিকার্ডো জিয়া
@ ক্রিকারোজিয়া বলতে আমি জেদী খেলা বোঝাতে চাইছি না তবে বলছি কেন্দ্রিক ডিভটি উল্লম্বভাবে প্রসারিত হবে যখন উল্লম্বভাবে কেন্দ্রীভূত থাকা ভুল। চেষ্টা করে দেখুন আমি জানি যখন আমি বলি উচ্চতা অবশ্যই "স্থির" হতে হবে, এটি সঠিক শব্দ নয়। এটি প্রকৃতপক্ষে তার পিতামাতার সাথে সম্পর্কিত। যাইহোক আমি মনে করি ক্রিস কোয়ারের পদ্ধতিটি আরও বোধগম্য হয়েছে, আমার উত্তর দেখুন stackoverflow.com/a/21919578/1491212 এটি আই 8 এর সাথে সামঞ্জস্যপূর্ণ এবং কোনও নির্দিষ্ট মাত্রা ছাড়াই একটি উপাদান নিয়ে কাজ করে।
— আর্মেল লার্সিয়ার
1
পছন্দ করুন ভুল না ভাই। এটি ব্যবহার করে দেখুন: codepen.io/shshaw/pen/gEiDt - সবুজ বাক্সে অনুচ্ছেদ যুক্ত করুন;]। মঞ্জুরিপ্রাপ্ত, এটি প্রভাবটি সম্পাদন করতে আধুনিকীকরণ ব্যবহার করে তবে এটি সবই করা যায়। আমি আপনার উত্তর এবং সিএসএস-ট্রিকস ডটকম পোস্টটিও দেখেছি, তবে সেই পদ্ধতিটি আমাকে খুশি করে না, এটি অতিরিক্ত মার্কআপ ব্যবহার করে এবং সিএসএস খুব ভার্জোজ। আমি মনে করি সেরা সমাধানটি হয় ফ্লেক্সবক্স বা transform: translate(-50%, -50%);কৌশলটি ব্যবহার করা । আইই 8 এর জন্য আমি এটিকে উপরের / কেন্দ্রে সারিবদ্ধ রেখে এগিয়ে চলেছি।
— রিকার্ডো জিয়া
1
@ ক্রিকারোজিয়া ওয়েল আপনি যে কোডেকেনটির সাথে লিঙ্ক করেছেন তা "প্রদর্শন: টেবিল" পদ্ধতি এবং অতিরিক্ত মার্কআপ ব্যবহার করে যাতে আমি অবাক হই না। যাইহোক, আপনার শেষ বাক্যে +1 করুন।
— আর্মেল লার্সিয়ার
23

সবচেয়ে সহজ সমাধান নীচে:

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
  border:1px solid #000;
}
.inner-div{
  margin: auto;
  text-align:center;
  border:1px solid red;
}
<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>
স্নিপেট প্রসারিত করুন

— বর্ষা ধাডগে
সূত্র
2
আসলে এখনও সবচেয়ে সহজ এক :) যদিও, আমাকে শৈলীর পরিবর্তে শৈলীগুলি একটি বাহ্যিক-ডিভ-এ স্থাপন করতে হয়েছিল।
— বাবুরাও
21

দুর্ভাগ্যক্রমে - তবে আশ্চর্যের সাথে নয় - সমাধানটি যত জটিল হতে পারে তার চেয়ে বেশি জটিল। এছাড়াও দুর্ভাগ্যক্রমে, আপনি উল্লম্বভাবে কেন্দ্রীভূত করতে চান ডিভের চারপাশে আপনাকে অতিরিক্ত ডিভ ব্যবহার করতে হবে।

মজিলা, অপেরা, সাফারি ইত্যাদির মতো স্ট্যান্ডার্ড-কমপ্লায়েন্ট ব্রাউজারগুলির জন্য আপনাকে বাইরের ডিভটি একটি টেবিল হিসাবে প্রদর্শিত করতে হবে এবং অভ্যন্তরীণ ডিভটি একটি টেবিল-সেল হিসাবে প্রদর্শিত হবে - যা পরে উল্লম্বভাবে কেন্দ্রীভূত হতে পারে। ইন্টারনেট এক্সপ্লোরার, আপনি প্রয়োজন অবস্থান ভেতরের DIV আছে একেবারে বাইরের div মধ্যে এবং তারপর উল্লেখ শীর্ষ যেমন 50% । নিম্নলিখিত পৃষ্ঠাগুলি এই কৌশলটি ভালভাবে ব্যাখ্যা করে এবং কিছু কোড নমুনাও সরবরাহ করে:

জাভাস্ক্রিপ্ট ব্যবহার করে উল্লম্ব কেন্দ্রীকরণ করার একটি কৌশলও রয়েছে। জাভাস্ক্রিপ্ট এবং সিএসএসের সাথে সামগ্রীর উল্লম্ব সারিবদ্ধকরণ এটি দেখায়।

— এসিড
সূত্র
20

যদি কেউ কেবলমাত্র ইন্টারনেট এক্সপ্লোরার 10 (এবং তারপরের) জন্য যত্ন করে তবে ব্যবহার করুন flexbox:

.parent {
    width: 500px;
    height: 500px;
    background: yellow;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.centered {
    width: 100px;
    height: 100px;
    background: blue;
}
<div class="parent">
    <div class="centered"></div>
</div>
স্নিপেট প্রসারিত করুন

ফ্লেক্সবক্স সমর্থন: http://caniuse.com / ফ্লেক্সবক্স

— bravedick
সূত্র
অ্যান্ড্রয়েড <4.4 সমর্থন করে না align-items: center;!
— আন্দ্রে ফিডলার
প্রকৃতপক্ষে, এটি প্রান্তিককরণগুলিকে সমর্থন করে: কেন্দ্র; caniuse.com/#search=align-items
— t.mikael.d
@ t.mikael.d আপনি এই টেবিলটি আরও ঘনিষ্ঠভাবে দেখতে চান। অ্যান্ড্রয়েড <4.4 এর জন্য, এটিতে লেখা আছে "কেবলমাত্র পুরাতন ফ্লেক্সবক্সের স্পেসিফিকেশন সমর্থন করে এবং মোড়ানো সমর্থন করে না।"
— নাথান ওসমান
15

একটি উপাদানকে উলম্বভাবে কেন্দ্র করার একটি আধুনিক উপায় হ'ল ব্যবহার করা flexbox।

উচ্চতা নির্ধারণ করার জন্য আপনার একটি পিতা-মাতার প্রয়োজন এবং কেন্দ্রে কোনও শিশু প্রয়োজন।

নীচের উদাহরণটি আপনার ব্রাউজারের মধ্যে একটি ডিভিডিকে কেন্দ্র করবে। কি গুরুত্বপূর্ণ (আমার উদাহরণে) সেট করতে হয় height: 100%করতে bodyএবং htmlতারপর min-height: 100%আপনার ধারক হয়।

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}
<div id='center_container'>
  <div id='center'>I am center.</div>
</div>
স্নিপেট প্রসারিত করুন

— Marwelln
সূত্র
14

শুধুমাত্র উল্লম্বভাবে কেন্দ্র করে

আপনি যদি ইন্টারনেট এক্সপ্লোরার 6 এবং 7 এর বিষয়ে চিন্তা না করেন তবে আপনি এমন একটি প্রযুক্তি ব্যবহার করতে পারেন যাতে দুটি ধারক অন্তর্ভুক্ত থাকে।

বাইরের ধারক:

  • উচিত display: table;

অভ্যন্তরীণ পাত্রে:

  • উচিত display: table-cell;
  • উচিত vertical-align: middle;

সামগ্রী বাক্স:

  • উচিত display: inline-block;

আপনি যে কোনও সামগ্রী আপনার প্রবন্ধ বা উচ্চতার যত্ন না করেই সামগ্রী বাক্সে যুক্ত করতে পারেন!

ডেমো:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

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

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>
স্নিপেট প্রসারিত করুন

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

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

আপনি যদি অনুভূমিকভাবে এবং উল্লম্বভাবে উভয়কেই কেন্দ্র করতে চান তবে আপনার নিম্নলিখিতগুলিরও প্রয়োজন।

অভ্যন্তরীণ পাত্রে:

  • উচিত text-align: center;

সামগ্রী বাক্স:

  • উদাহরণস্বরূপ অনুভূমিক পাঠ্য-প্রান্তিককরণের পুনরায় সমন্বয় করা উচিত text-align: left;বা text-align: right;আপনি না চাইলে পাঠ্যটিকে কেন্দ্রিক করে তোলা উচিত

ডেমো:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    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">
         Malcolm in the Middle
     </div>
   </div>
</div>
স্নিপেট প্রসারিত করুন

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

— জন স্লেজার্স
সূত্র
13 

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */    
}

.vertical {
  position: absolute;
  top: 50%;
  //left: 0;
  transform: translate(0, -50%); /* (x, y) => position */
}

.horizontal {
  position: absolute;
  //top: 0;
  left: 50%;
  transform: translate(-50%, 0); /* (x, y)  => position */
}

div {
  padding: 1em;
  background-color: grey; 
  color: white;
}  
<body>
  <div class="vertical">Vertically left</div>
  <div class="horizontal">Horizontal top</div>
  <div class="center">Vertically Horizontal</div>  
</body>
স্নিপেট প্রসারিত করুন

সম্পর্কিত: একটি চিত্র কেন্দ্র করুন

— antelove
সূত্র
10

আমাকে যখন এই ইস্যুতে ফিরে আসতে হয় তখন আমি সর্বদা সেখানে যাই ।

যারা লাফিয়ে উঠতে চান না তাদের জন্য:

  1. যেমন পিতা বা মাতা ধারক উল্লেখ করুন position:relativeবা position:absolute।
  2. শিশু পাত্রে একটি নির্দিষ্ট উচ্চতা উল্লেখ করুন।
  3. উপরের নীচে পিতামাতার মাঝখানে সরাতে সন্তানের ধারকটি সেট করুন position:absoluteএবং সেট top:50%করুন।
  4. মার্জিন-শীর্ষ সেট করুন: - হ্যাঁ আইটেমটি অফসেট করতে আপনার সন্তানের ধারকের অর্ধেক উচ্চতা হ'ল।

কোডে এটির একটি উদাহরণ:

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>
— Ninx
সূত্র
9

সিএসএসের নমনীয় সম্পত্তি ব্যবহার করা।

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}
<div class="parent">
    <div class="child"></div>
</div>
স্নিপেট প্রসারিত করুন

বা ব্যবহার করে display: flex;এবংmargin: auto;

কোড স্নিপেট দেখান

পাঠ্য কেন্দ্র প্রদর্শন করুন

কোড স্নিপেট দেখান

শতাংশ (%) উচ্চতা এবং প্রস্থ ব্যবহার করে।

কোড স্নিপেট দেখান

— দীপু রেঘুনাথ
সূত্র
8

আমি এই সিএসএসটি স্রেফ লিখেছি এবং আরও জানতে দয়া করে যান: উল্লম্ব সহ এই নিবন্ধটি সিএসএসের মাত্র 3 লাইন দিয়ে কিছু সারিবদ্ধ করুন ।

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}
— সানজিব দেবনাথ
সূত্র
1
সিএসএস রূপান্তরগুলি পাঠ্য এবং সীমানায় বিকৃতি সৃষ্টি করতে পারে (যখন অঙ্কটি ভগ্নাংশ পিক্সেলের ফলাফল দেয়)।
— নাথান কে
5

নতুন আগতদের জন্য দয়া করে চেষ্টা করুন 

display: flex;
align-items: center;
justify-content: center;
— উসমান আই
সূত্র
1
এই সিএসএস কোডটি উল্লম্বভাবে কীভাবে প্রান্তিককরণ করে তা দয়া করে একটি স্ট্যাক স্নিপেট যুক্ত করুন । div
— হেরেটিক বানর
এটিও কাজ করে <div style="display:flex"><div style="margin:auto">Inner</div></div>
— ইদ্রিসাদেতুম্বি
আইটেমগুলিকে সারিবদ্ধ করা এবং ন্যায্যতা প্রমাণ করার জন্য আমি এই দুর্দান্ত ব্যাখ্যা দিয়ে এসেছি। অবশ্যই পড়ুন: স্ট্যাকওভারফ্লো.com
— উসমান আই
4

বিলবাদ থেকে প্রাপ্ত উত্তরটি কেবলমাত্র ডিভের একটি নির্দিষ্ট প্রস্থের সাথে কাজ করে .inner। এই সমাধান অ্যাট্রিবিউট যুক্ত করে একটি গতিশীল প্রস্থ জন্য কাজ করে text-align: centerযাওয়ার .outerDIV আছে।

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>
স্নিপেট প্রসারিত করুন

— Ruwen
সূত্র
মজাদার! আমি প্রায় অভিন্ন কৌশল ব্যবহার করছি! -> স্ট্যাকওভারফ্লো.com
— জন স্লেজার
4

তিনটি লাইন কোড ব্যবহার transformকরে আধুনিক ব্রাউজার এবং ইন্টারনেট এক্সপ্লোরার ব্যবহারিকভাবে কাজ করে:

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

আমি এই উত্তরটি যুক্ত করছি যেহেতু আমি এই উত্তরটির পূর্ববর্তী সংস্করণে কিছুটা অসম্পূর্ণতা পেয়েছি (এবং স্ট্যাক ওভারফ্লো আমাকে কেবল মন্তব্য করার অনুমতি দেয় না)।

  1. যদি বর্তমান ডিভি শরীরে থাকে এবং কোনও ধারক ডিভ না থাকে তবে 'অবস্থান' আপেক্ষিক স্টাইলিংটি গণ্ডগোল করে। তবে 'ফিক্সড' কাজ করে বলে মনে হচ্ছে, তবে এটি ভিউপোর্টের কেন্দ্রে থাকা সামগ্রীটি স্পষ্টতই ঠিক করে দিয়েছে অবস্থান: আপেক্ষিক

  2. এছাড়াও আমি কিছু স্ট্রোল ডিভগুলি কেন্দ্রীভূত করার জন্য এই স্টাইলিংটি ব্যবহার করেছি এবং দেখেছি যে মোজিলায় এই রূপান্তরিত ডিভের সমস্ত উপাদান তাদের নীচের সীমানা হারিয়েছে। সম্ভবত একটি রেন্ডারিং ইস্যু। তবে তাদের মধ্যে কিছুতে কেবল সর্বনিম্ন প্যাডিং যুক্ত করে এটি সঠিকভাবে উপস্থাপন করেছে। ক্রোম এবং ইন্টারনেট এক্সপ্লোরার (আশ্চর্যজনকভাবে) প্যাডিংয়ের কোনও প্রয়োজন ছাড়াই বাক্সগুলি রেন্ডার করে অভ্যন্তরীণ প্যাডিং ছাড়া মোজিলা প্যাডিংস সহ মোজিলা

— MandarK
সূত্র
3

নিম্নলিখিত লিঙ্কটি আপনার সিএসএসে মাত্র 3 টি লাইন দিয়ে এটি করার একটি সহজ উপায় উপস্থাপন করে:

উল্লম্ব সিএসএসের মাত্র 3 লাইন দিয়ে যেকোন কিছু সারিবদ্ধ করুন ।

ক্রেডিটগুলি : সেবাস্তিয়ান একস্ট্রোম ।

আমি জানি প্রশ্নের ইতিমধ্যে একটি উত্তর আছে তবে আমি এর সরলতার জন্য লিঙ্কটিতে ইউটিলিটিটি দেখেছি।

— Hicaro
সূত্র
3

ব্রাউজারের সামঞ্জস্যের জন্য উত্তর দিচ্ছেন না তবে নতুন গ্রিড এবং তেমন নতুন ফ্লেক্সবক্স বৈশিষ্ট্যটি উল্লেখ করার জন্য নয়।

গ্রিড

থেকে: মোজিলা - গ্রিড ডকুমেন্টেশন - উল্লম্বভাবে ডিভ সারিবদ্ধ করুন

ব্রাউজার সমর্থন: গ্রিড ব্রাউজার সমর্থন

সিএসএস:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

এইচটিএমএল:

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

flexbox

ব্রাউজার সমর্থন: ফ্লেক্সবক্স ব্রাউজার সমর্থন

সিএসএস:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
— ctekk
সূত্র
3

আমি মনে করি ফ্লেক্সবক্স ব্যবহার না করেই সমস্ত ব্রাউজারের জন্য একটি কঠিন সমাধান - "সারিবদ্ধ-আইটেমগুলি: কেন্দ্র;" প্রদর্শনের সংমিশ্রণ: টেবিল এবং উল্লম্ব-সারিবদ্ধ: মাঝারি;।

সিএসএস

.vertically-center
{
    display: table;

    width: 100%;  /* optional */
    height: 100%; /* optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

এইচটিএমএল

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

Moডেমো: https://jsfiddle.net/6m640rpp/

— মার্টিন ওয়ানটেক
সূত্র
2

আমি এটি দিয়ে এটি করেছি (প্রস্থ, উচ্চতা, মার্জিন-শীর্ষ এবং সেই অনুযায়ী মার্জিন-বাম পরিবর্তন করুন):

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class="wrapper"> -- Content -- </div>
— Netuddki
সূত্র
যদি আপনি ডিআইভির প্রস্থ / উচ্চতাটি কেনার চেষ্টা করছেন তবেই তা ভাল। এটি প্রশ্নটি যা জিজ্ঞাসা করছে তা নয়
— egr103
2

ফ্লেক্সবক্স ব্যবহার করে সামগ্রীগুলি সহজেই কেন্দ্রীভূত করা যায়। নিম্নলিখিত কোডটি কনটেইনারটির জন্য সিএসএস দেখায় যার মধ্যে বিষয়বস্তু কেন্দ্রিক হওয়া দরকার:

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}
— মহেন্দ্র লিয়া
সূত্র
2

বিশেষত আপেক্ষিক (অজানা) উচ্চতার সাথে পিতামাতার ডিভাইসের জন্য, অজানাটিকে কেন্দ্র করে সমাধানে আমার পক্ষে দুর্দান্ত কাজ করে। নিবন্ধে কিছু সত্যিই চমৎকার কোড উদাহরণ রয়েছে।

এটি ক্রোম, ফায়ারফক্স, অপেরা এবং ইন্টারনেট এক্সপ্লোরারে পরীক্ষা করা হয়েছিল।

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>
স্নিপেট প্রসারিত করুন

— Ruwen
সূত্র
2

কেবল এটি করুন: আপনার ক্লাসটি যুক্ত করুন div:

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

এবং একটি ব্যাখ্যা জন্য এই নিবন্ধ পড়ুন । দ্রষ্টব্য: Heightপ্রয়োজনীয়

— Anshul
সূত্র
2

সম্প্রতি একটি কৌশল খুঁজে পেয়েছি: আপনার ব্যবহার করা দরকার top 50%এবং তারপরে আপনার একটি করা উচিতtranslateY(-50%)

.outer-div {
  position: relative;
  height: 150px;
  width: 150px;
  background-color: red;
}

.centered-div {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: white;
}
<div class='outer-div'>
  <div class='centered-div'>
    Test text
  </div>
</div>
স্নিপেট প্রসারিত করুন

— Melchia
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.