ডিভিডে একেবারে পজিশন উপাদান কীভাবে কেন্দ্র করবেন?

1078

আমার উইন্ডোর মাঝখানে একটি div(সহ position:absolute;) উপাদান স্থাপন করা দরকার। তবে এটি করতে আমার সমস্যা হচ্ছে কারণ প্রস্থটি অজানা ।

আমি এই চেষ্টা করেছিলাম। প্রস্থটি প্রতিক্রিয়াশীল হওয়ায় এটি সামঞ্জস্য করা দরকার।

.center {
  left: 50%;
  bottom:5px;
}

কোন ধারনা?

— ইশ
সূত্র

4

পরম কেন্দ্রের উদাহরণগুলির মধ্যে আপনার একটি উদাহরণ রয়েছে যা বিভিন্ন পরিস্থিতিতে সাধারণীকরণ করা যায়।

— মিহাই

2

এই প্রশ্নের আরও উত্তম উত্তর আছে স্ট্যাকওভারফ্লো

— অ্যান্ড্রু সুইফট

1331

<body>
  <div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
      I am some centered shrink-to-fit content! <br />
      tum te tum
    </div>
  </div>
</body>

স্নিপেট প্রসারিত করুন

— bobince
সূত্র

76

অসাধারণ. আমার জন্য কাজ! আমার একটি সমস্যা ছিল: আমি যে চিত্রটি কেন্দ্র করে যাচ্ছিলাম তা বেশ বড়, এর ফলে বাইরের ডিভটি পৃষ্ঠার ডান প্রান্তটি ছাড়িয়ে গেছে এবং অনুভূমিক স্ক্রোলিং ঘটায়। আমি "ডান" জন্য "বাম" সিএসএস সম্পত্তিটি অদলবদল করেছি, এবং এখন পর্যন্ত এটি স্ক্রিনের বাম প্রান্তের উপর দিয়ে যাওয়ার কারণে স্ক্রোলিংয়ের কারণ হয় না

— বুমশাখা ২

ব্যবহারকারী যদি পৃষ্ঠাটি নীচে স্ক্রোল করে থাকেন, ওভেরি উপরে উপস্থিত হয়, আপনি কি মনে করেন যে স্ক্রোল সমস্যা সমাধানের জন্য jquery ব্যবহার করা ভাল ধারণা হবে

— PUG

1

স্ক্রোল ইস্যুটির একটি সমাধান হতে পারে position: fixedতবে যদি উচ্চতা ওভারলেয়ের অজানা থাকে তবে ওভারলেয়ের জন্য স্ক্রোল বারগুলি প্রয়োগ করতে হবে

— PUG

3

এই কৌশলটি ব্যবহার করে আমার সামান্য সমস্যা হয়েছে encountered বাহ্যিক ডিভ স্ক্রিনের 50% গ্রহণ করে, 50% স্ক্রীন আকারের চেয়ে পাঠ্য প্রশস্ত হলে কিছু স্থানান্তর ঘটে। আমি এটিকে বাইরের ডিভকে "প্রস্থ: 100%" এ সেট করে এবং বাম সম্পত্তিটি সরিয়ে সমাধান করেছি। অভ্যন্তরীণ ডিভের জন্য, আমি কেবল আমার পাঠ্য-প্রান্তিককরণটিকে কেন্দ্রে সেট করি। এটি সমস্যার সমাধান করে।

— নিকি এল।

3

শতকরা উচ্চতা এই ক্ষেত্রে ধারণকারী ব্লকের সাথে সম্পর্কিত <html>। তবে <html>উপাদানটির heightনির্দিষ্ট কোনও নির্দিষ্টকরণ নেই তাই এটি নথিতে থাকা সমস্ত সামগ্রীর উচ্চতা নেয়, যা কিছুই নয় কারণ একমাত্র সামগ্রী সম্পূর্ণ অবস্থানযুক্ত (সামগ্রী প্রবাহের বাইরে নেওয়া)। উপাদানটিতে যুক্ত height: 100%করা এটির জন্য <html>একটি পার্থক্য করে।

— বোবিন্স

1800

এটি আমার পক্ষে কাজ করে:

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* Need a specific value to work */
}

<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

স্নিপেট প্রসারিত করুন

— ম্যাথিয়াস ওয়েইলার
সূত্র

36

আমি কেবল যে নেতিবাচক মার্জিনগুলি পুরোপুরি বৈধ সিএসএস হিসাবে পেতে চাই এবং এটি একটি "নোংরা হ্যাক" হিসাবে দেখা উচিত নয় । নেতিবাচক মার্জিনগুলি ডাব্লু 3 সি বক্স মডেলের নির্দিষ্টকরণে উল্লেখ করা হয়েছে। কিছু ব্যক্তি নির্বিচারে সিদ্ধান্ত নিতে পারে যে এটি হ্যাক কারণ তারা ক) তাদের কাছে অজ্ঞ, বা খ) তাদের খারাপ সিএসএস ঠিক করতে এগুলি ব্যবহার করছে।

— জোসেফ রেভেনওলফ

58

কেন্দ্রের জন্য ডিভের প্রস্থ নির্ধারণ করতে হবে - এটিতে টেক্সট সহ একটি বোতাম দিয়ে স্বয়ংক্রিয়ভাবে কাজ করবে না।

— স্টিফান

2

@ জোশুয়া এটি কেবল উত্তর অনুভূমিকভাবে নয়, অনুভূমিকভাবে কেন্দ্র করবে।

— ygoe

3

আমি এই সমাধানটি পছন্দ করি কারণ এটি ভিউপোর্টের আকার বাড়ায় না।

— বরফায়িত

13

ক্রস ব্রাউজার সহায়তার জন্য: widthএটি কাজ করার জন্য একটি নির্দিষ্ট মানতে সেট করা উচিত। autoএবং 100%উপাদানটি কেন্দ্র করে না। display: block;একটি আবশ্যক. position: absolute;একটি আবশ্যক নয়। সমস্ত মান কাজ করবে। মূল উপাদানগুলি positionঅন্য কিছুতে সেট করা উচিত static। সেট leftএবং rightকরা 0অপ্রয়োজনীয়। margin-left: auto; margin-right: auto;কাজ করবে

— ওনুর ইল্ডারিয়াম

767

প্রতিক্রিয়াশীল সমাধান

আপনার যদি আইই 8 এবং তার চেয়ে কম সমর্থন করার প্রয়োজন না হয় তবে সাধারণভাবে প্রতিক্রিয়াশীল ডিজাইন বা অজানা মাত্রার জন্য এখানে একটি ভাল সমাধান ।

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

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

.outer {
    position: relative; /* or absolute */
    
    /* unnecessary styling properties */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
}

<div class="outer">
    <div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>

স্নিপেট প্রসারিত করুন

এখানে একটি জেএস ফিডল

ক্লুটি হ'ল, left: 50%এটি পিতামাতার সাথে সম্পর্কিত whiletranslate রূপান্তরগুলি উপাদানগুলির প্রস্থ / উচ্চতার সাথে সম্পর্কিত।

এইভাবে আপনার সন্তানের এবং পিতা বা মাতা উভয়ের উপর নমনীয় প্রস্থ সহ একটি পুরোপুরি কেন্দ্রিক উপাদান রয়েছে। বোনাস: সন্তান পিতামাতার চেয়ে বড় হলেও এটি কাজ করে।

আপনি এটির সাহায্যে এটি উল্লম্বভাবে কেন্দ্রীভূত করতে পারেন (এবং আবার, পিতামাতার এবং সন্তানের প্রস্থ এবং উচ্চতা সম্পূর্ণ নমনীয় হতে পারে (এবং / অথবা অজানা)):

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

মনে রাখবেন যে আপনার transformপাশাপাশি প্রিফিক্সড বিক্রেতার প্রয়োজনও থাকতে পারে । উদাহরণ স্বরূপ-webkit-transform: translate(-50%,-50%);

— ProblemsOfSumit
সূত্র

26

আই 7 সাপোর্টের আর দরকার নেই, এটি ডি-ফ্যাক্টো সমাধান হওয়া উচিত। এই দ্রষ্টব্যটি বাম থেকে ভাল: 0 / ডান: 0 কৌশল যেহেতু এটি উপাদানগুলিকে পূর্ণ প্রস্থ করে তোলে যখন এটি প্রস্থকে ধরে রাখে এবং অজানা প্রস্থের উপাদানগুলিতে কাজ করে।

— আলেবেম

51

এখন পর্যন্ত সেরা উত্তর, ডিভ বাক্সটি যে বাক্সে রয়েছে তা যদি সন্তানের চেয়ে ছোট হয় তবে এটি কাজ করে।

— কেস

2

@ চাদ জনসন অবশ্যই তা করেন। webkit-আমি প্রস্তাব হিসাবে উপসর্গ সঙ্গে এটি চেষ্টা করুন ।

— সমস্যাগুলি

2

আহ, ওয়েবেকিট সম্পর্কে আপনার নোটটি মিস করেছি। অসাধারণ.

— চাদ জনসন

3

transform: translateমনে হয় position: fixedবাচ্চাদের অকেজো করে তোলে । গৃহীত উত্তর এই ক্ষেত্রে আরও ভাল কাজ করে।

— dmvianna

48

সত্যিই দুর্দান্ত পোস্ট .. কেউ যদি সিঙ্গল ডিভ ট্যাগ দিয়ে এটি করতে চায় তবে কেবল যুক্ত করতে চেয়েছিলেন তবে এখানে উপায়:

widthহিসাবে গ্রহণ 900px।

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

এক্ষেত্রে সবার widthআগে জানা উচিত ।

— pratikabu
সূত্র

26

"because the width is unknown"... এটি প্রশ্নের উত্তর দেয় না

— মিশেল আয়রেস

15

হাই @ মিশেল আসলে আপনি যখন পরম ডিভকে কেন্দ্র করে সম্পর্কিত কোনও কিছুর জন্য অনুসন্ধান করেন, তখন এই লিঙ্কটি প্রথম লিঙ্ক হিসাবে আসে। সে কারণেই আমি এই সমাধানটি যুক্ত করেছিলাম, যদি আমার মতো কেউ উপরের সমাধানটির

— সন্ধানে থাকে তবে

1

প্রতিক্রিয়াশীল ডিজাইনের জন্য খুব দরকারী নয়, তবে আমি প্রতিক্রিয়াশীল ডিজাইন করা শুরু না করা পর্যন্ত এটি আমার পক্ষে কাজ করেছিল। একেবারে অবস্থিত পরিচিত প্রস্থ উপাদানগুলির কেন্দ্রীকরণের জন্য এটি একটি বৈধ উত্তর ।

— শান কেন্ডেল

35

পরম কেন্দ্র

এইচটিএমএল:

<div class="parent">
  <div class="child">
    <!-- content -->
  </div>
</div>

সিএসএস:

.parent {
  position: relative;
}

.child {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}

ডেমো: http://jsbin.com/rexuk/2/

গুগল ক্রোম, ফায়ারফক্স এবং আই 8 তে পরীক্ষিত

আশাকরি এটা সাহায্য করবে :)

— ইজাস আমিনুদিন
সূত্র

কাজ না, নিম্নলিখিত codepen চেক করুন নেই codepen.io/anon/pen/YqWxjJ

— মার্ক

1

দুঃখিত আমি মনে করি এটা কাজ করবে কিন্তু আপনি একটি নির্দিষ্ট উচ্চতা এবং প্রস্থ অন্তর্ভুক্ত করতে হবে codepen.io/anon/pen/WwxEYQ

— মার্ক

31

উল্লম্ব এবং অনুভূমিক জন্য এই কাজ

  #myContent{
        position: absolute;
        left: 0;
        right: 0;
        top:0;
        bottom:0;
        margin: auto;
   }

এবং আপনি যদি পিতামাতার উপাদান কেন্দ্র বানাতে চান তবে পিতামাতার আত্মীয়ের অবস্থান নির্ধারণ করুন

 #parentElement{
      position:relative
  }

সম্পাদনা:

উল্লম্ব কেন্দ্রের জন্য আপনার উপাদানের সাথে উচ্চতা নির্ধারণ করুন। @ রাউলকে ধন্যবাদ
আপনি যদি পিতামাতার উপাদান কেন্দ্র বানাতে চান তবে আপেক্ষিকের জন্য পিতামাতার অবস্থান নির্ধারণ করুন

— মহসেন আবদুল্লাহি
সূত্র

2

আমি মনে করি আপনাকে উল্লম্বভাবে কাজ করার জন্য উচ্চতা যুক্ত করতে হবে।

— রাউল

পৃষ্ঠার কেন্দ্রে এই অবস্থানগুলি দেখে মনে হচ্ছে, অন্য উপাদানগুলির কেন্দ্র নয়।

— গন্টার জ্যাচবাউয়ার

1

@ গন্তেরজ্যাচবাউয়ার হ্যাঁ, আপনি যদি পিতামাতার উপাদান কেন্দ্র বানাতে চান তবে পিতামাতার আত্মীয়ের অবস্থান নির্ধারণ করুন।

— মোহসেন আবদুল্লাহি

20

সমাধানের অনুসন্ধানে আমি উপরে উত্তর পেয়েছি এবং ম্যাথিয়াস ওয়েইলারের উত্তরের সাথে পাঠ্য-সারিবদ্ধ ব্যবহার করে সামগ্রী তৈরি করতে পারি।

#content{
  position:absolute;
  left:0;
  right:0;
  text-align: center;
}

ক্রোম এবং ফায়ারফক্সের সাথে কাজ করেছেন।

— cavila
সূত্র

5

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

— টোবিয়াস

এটি আমার সমস্যাটি এখানে স্থির করে দিয়েছে । ধন্যবাদ!

— ভলমাইক

আমার "পাঠ্য-প্রান্তিককরণ: কেন্দ্র" দরকার ছিল এবং এটি এখানে কাজ করেছিল যেখানে @ProblemsOfSumit দ্বারা প্রস্তাবিত সমাধানটি আমার পাঠ্য মোড়ানোর কারণে কাজ করে না।

— নাট

19

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

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

— michal.jakubeczy
সূত্র

খুব শীতল ফিক্স ধন্যবাদ

— স্ট্যানলি বাটেশ্বর

14

** প্রতিক্রিয়াশীল সমাধান **

ডিভের উপাদানটি ধরে নেওয়া, এটি অন্য ডিভ ...

এই সমাধান ভাল কাজ করে

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

ধারক যে কোনো আকারের হতে পারে (অবস্থান আপেক্ষিক হতে হবে)

.container {
position: relative;/*important*/
width: 200px;/*any width*/
height: 200px;/*any height*/
background: red;
}

উপাদান ( DIV আছে ) ও যে কোনো আকারের হতে পারে (হতে হবে ধারক চেয়ে ছোট )

.center {
position: absolute;/*important*/
top: 50%;/*position Y halfway in*/
left: 50%;/*position X halfway in*/
transform: translate(-50%,-50%);/*move it halfway back(x,y)*/
width: 100px;/*any width*/
height: 100px;/*any height*/
background: blue;
}

ফলাফলটি এরকম দেখাবে। কোড স্নিপেট চালান

.container {
	position: relative;
	width: 200px;
	height: 200px;
	background: red;
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100px;
	height: 100px;
	background: blue;
}

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

স্নিপেট প্রসারিত করুন

আমি এটি খুব সহায়ক বলে মনে করি

— RealMJDev
সূত্র

1

প্রতিভা। অন্য কেন এই নিয়ে আসে নি।

— মেসকেব

আপনাকে ধন্যবাদ, শুভ কোডিং

— রিয়েলএমজেডিভ

13

এটি অন্যান্য উত্তরের মিশ্রণ, যা আমাদের পক্ষে কাজ করেছিল:

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}

— Crashalot
সূত্র

ভাল লাগল থ্যাঙ্কস ম্যান!

— স্ট্যানলে বাটেশ্বর

12

আমি বুঝতে পেরেছি এই প্রশ্নের ইতিমধ্যে কয়েকটি উত্তর রয়েছে, তবে আমি এমন কোনও সমাধান খুঁজে পাইনি যা প্রায় সব শ্রেণিতে কাজ করবে যা বুদ্ধিমান এবং মার্জিতও বটে, সুতরাং গুচ্ছটি টুইট করার পরে এখানে আমার গ্রহণযোগ্যতা রয়েছে:

.container {
    position: relative;
}

.container .cat-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 100;
    text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */
    background-color: white;
}

.color-block {
  height: 250px;
  width: 100%;
  background-color: green;
}

<div class="container">
  <a class="cat-link" href="">Category</a>
  <div class="color-block"></div>
</div>

স্নিপেট প্রসারিত করুন

এটি যা বলছে তা আমাকে একটি top: 50%এবং একটি দিন left: 50%, তারপরে এক্স / ওয়াই অক্ষ উভয় রূপান্তর (স্থান তৈরি করুন) করুন-50% মান হিসাবে , একটি অর্থে "একটি আয়না স্পেস তৈরি করুন"।

যেমন, এটি একটি ডিভের সমস্ত 4 পয়েন্টের জন্য একটি সমান স্থান তৈরি করে, যা সর্বদা একটি বাক্স (4 টি পাশ থাকে)।

এটা হবে:

পিতামাতার উচ্চতা / প্রস্থ না জেনে কাজ করুন।
প্রতিক্রিয়াশীল উপর কাজ।
এক্স বা ওয়াই অক্ষকে নিয়ে কাজ করুন। বা উভয়ই, আমার উদাহরণ হিসাবে।
আমি এমন পরিস্থিতি নিয়ে আসতে পারি না যেখানে এটি কাজ করে না।

— ড্যানিয়েল মস
সূত্র

আপনি যদি এমন কোনও পরিস্থিতি খুঁজে পান যেখানে এটি কাজ করে না তবে দয়া করে আমাকে জানিয়ে দিন যাতে আমি আপনার ইনপুট দিয়ে প্রশ্নটি সম্পাদনা করতে পারি।

— ড্যানিয়েল মস

রূপান্তর / অনুবাদের ফলে সাফারি নির্দিষ্ট স্কেলটিকে অস্পষ্ট করে পাঠ্য রেন্ডার করে

— জেমস টান

@ ডানিয়েলমস ব্যবহার না করার কোনও কারণ translate(-50%,-50%);?

— মার্ক বাইজেন্স

12

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

ডেমো

<div class="container">
  <div class="box">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </div>
</div>

.container {
  position: relative;
  width: 100%;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

— lowtechsun
সূত্র

9

ফ্লেক্স সম্পূর্ণ পরিকল্পিত ডিভকে কেন্দ্র করে ব্যবহার করা যেতে পারে।

display:flex;
align-items:center;
justify-content:center;

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

.relative {
  width: 275px;
  height: 200px;
  background: royalblue;
  color: white;
  margin: auto;
  position: relative;
}

.absolute-block {
  position: absolute;
  height: 36px;
  background: orange;
  padding: 0px 10px;
  bottom: -5%;
  border: 1px solid black;
}

.center-text {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.3);
}

<div class="relative center-text">
  Relative Block
  <div class="absolute-block center-text">Absolute Block</div>
</div>

স্নিপেট প্রসারিত করুন

— ধাওয়াল জর্দোশ
সূত্র

আমার স্ক্রিনে - ফায়ারফক্স 68.x, এটি কেবল প্রান্তিককরণ করে না, পরম ব্লকটি আপেক্ষিক ব্লকের নীচে উপস্থিত হয়

— ওয়েবউম্যান

আপনি এটি চেষ্টা করতে পারেন display: -webkit-flex;?

— ধাওয়াল জর্দোশ ২

7

আমি যতদূর জানি, অজানা প্রস্থের পক্ষে এটি অর্জন করা অসম্ভব।

আপনি এটি করতে পারেন - যদি এটি আপনার দৃশ্যে কাজ করে - 100% প্রস্থ এবং উচ্চতা সহ একেবারে অদৃশ্য উপাদানের অবস্থান তৈরি করতে পারে এবং মার্জিনটি ব্যবহার করে উপাদানটি সেখানে কেন্দ্রিক করে রাখতে পারে: অটো এবং সম্ভবত উল্লম্ব-সারিবদ্ধ হয়। অন্যথায়, এটি করার জন্য আপনার জাভাস্ক্রিপ্টের প্রয়োজন।

— Pekka
সূত্র

"মার্জিন: অটো" জিনিসটির জন্য +1। "মার্জিন: 0 অটো" - উল্লম্ব প্রান্তে এবং "অনুভূমিক" অনুভূমিকভাবে প্রয়োগ করে "0" রেখাটি ব্যবহার করে আমি অনুভূমিকভাবে একটি ডিভকে কেন্দ্র করার আগে এটি চেষ্টা করেছি tried আমি মনে করি পৃষ্ঠার দুটি নীচে 2 পুরু সাদা সীমানা পেতে স্ট্যাকওভারফ্লো খুব শীর্ষ স্তরের ডিভের জন্য এটি ব্যবহার করে। যাইহোক, সিএসএস মার্জিনে ডাব্লু 3 স্কুলগুলি স্বয়ংক্রিয় মানটির জন্য জানিয়েছে যে "এর ফলাফলটি ব্রাউজারের উপর নির্ভরশীল" - আমি ব্যক্তিগতভাবে এটি বিভিন্ন বিভিন্ন ব্রাউজার জুড়ে চেষ্টা করে দেখিনি, তাই আমি সত্যিই এই বিষয়টিতে মন্তব্য করতে পারি না (তবে এটা সম্ভবত তাদের কিছু মধ্যে কৌতুক আছে)

— Steg

1

আইই 8 কোনও সমস্যা না থাকলে এটি অজানা প্রস্থ (এবং উচ্চতা) এর পক্ষে সম্ভব। বিস্তারিত জানার জন্য আমার উত্তর দেখুন।

— সমস্যাগুলি

7

আমি @ বোবিন্সের উত্তরে যুক্ত করতে চাই:

<body>
    <div style="position: absolute; left: 50%;">
        <div style="position: relative; left: -50%; border: dotted red 1px;">
            I am some centered shrink-to-fit content! <br />
            tum te tum
        </div>
    </div>
</body>

উন্নত: /// এটি কেন্দ্রিক ডিভের বড় উপাদানগুলির সাথে অনুভূমিক স্ক্রোলবারটি উপস্থিত না করে।

<body>
    <div style="width:100%; position: absolute; overflow:hidden;">
        <div style="position:fixed; left: 50%;">
            <div style="position: relative; left: -50%; border: dotted red 1px;">
                I am some centered shrink-to-fit content! <br />
                tum te tum
            </div>
        </div>
    </div>
</body>

— বোতল
সূত্র

6

এটি করার জন্য একটি দরকারী jQuery প্লাগইন এখানে He এখানে পাওয়া গেছে । সিএসএসের মাধ্যমে খাঁটিভাবে এটি সম্ভব বলে আমি মনে করি না

/**
 * @author: Suissa
 * @name: Absolute Center
 * @date: 2007-10-09
 */
jQuery.fn.center = function() {
    return this.each(function(){
            var el = $(this);
            var h = el.height();
            var w = el.width();
            var w_box = $(window).width();
            var h_box = $(window).height(); 
            var w_total = (w_box - w)/2; //400
            var h_total = (h_box - h)/2;
            var css = {"position": 'absolute', "left": w_total+"px", "top":
h_total+"px"};
            el.css(css)
    });
};

— বেন শেলক
সূত্র

এটি সর্বোত্তম উপায় এবং বিশেষত প্রতিক্রিয়াশীল নকশা সহ।

— m4tm4t

যদি jQuery কোনও ক্ষেত্রে ব্যবহার করা হত তুচ্ছ

— কোড হুইস্পেরার

8

এটি ভাল উপায় নয়। যখনই সম্ভব সিএসএস ব্যবহার করা সর্বদা ভাল। প্রতিটি অক্ষের সিএসএসের সাথে এবং প্রতিক্রিয়াশীল পৃষ্ঠাগুলির জন্যও একটি ডিআইভি কেন্দ্রীকরণ সম্ভব। জাভাস্ক্রিপ্টের দরকার নেই!

— সমস্যাগুলি

1

@ ইয়াকার্ট এবং এই ক্ষেত্রে সরঞ্জামটি সিএসএস।

— সমস্যাগুলি

5

উপরের প্রতিক্রিয়াশীল সমাধানের স্যাস / কম্পাস সংস্করণ:

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}

— অ্যাডাম স্পেন্স
সূত্র

4

transform: translate(-50%, -50%)ওয়েবকিট ব্রাউজারগুলি ব্যবহার করে ওএস এক্স-এ টেক্সট এবং অন্যান্য সমস্ত সামগ্রী ঝাপসা করে তোলে। keithclark.co.uk/articles/gpu-text-rendering-in-webkit

— ইয়াসা

আপনি যে ধরণের অ্যান্টিয়ালাইজিংয়ের পছন্দ করেন তা কেবল ব্যবহার করুন যে আপনি -webkit-font-smoothing: antialiased;বিটিডব্লিউ পোস্ট করেছেন নিবন্ধটি থেকে!

— অ্যাডাম স্পেন্স

4

আমার পছন্দসই কেন্দ্রিক পদ্ধতি:

position: absolute;
margin: auto;
width: x%

পরম ব্লক উপাদান অবস্থান
মার্জিন অটো
উপরে / নীচে একই বাম / ডানদিকে

জেএসফিডেল এখানে

— vp_arth
সূত্র

4

এটি আমার পক্ষে কাজ করেছে:

<div class="container><p>My text</p></div>

.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}

— অ্যালান
সূত্র

এটি @ মাথিয়াস ওয়েইল এর উত্তর 5 বছর পরে।

— aodisdg চলমান

3

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

এইচটিএমএল:

<div id='parent'>
  <div id='child'></div>
</div>

সিএসএস:

#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}

— ডাস্টিন পোয়েসান্ট
সূত্র

3

#container
{
  position: relative;
  width: 100%;
  float:left
}
#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}

— বুর্কু একেএওজিএলইউ
সূত্র

2

এইচটিএমএল

<div id='parent'>
  <div id='centered-child'></div>
</div>

সিএসএস

#parent {
  position: relative;
}
#centered-child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
}

http://jsfiddle.net/f51rptfy/

— ডাস্টিন পোয়েসান্ট
সূত্র

2

এই সমাধানটি যদি উপাদানটিতে থাকে widthএবং কাজ করেheight

.wrapper {
  width: 300px;
  height: 200px;
  background-color: tomato;
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  background-color: deepskyblue;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

<div class="wrapper">
  <div class="content"></div>
</div>

স্নিপেট প্রসারিত করুন

— মো
সূত্র

2

এই প্রশ্নের সমাধানটি আমার ক্ষেত্রে কার্যকর হয়নি .. আমি কয়েকটি চিত্রের জন্য ক্যাপশন দিচ্ছি এবং আমি এটি ব্যবহার করে সমাধান করেছি

top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

display: flex;
align-items: center;

figure {
  position: relative;
  width: 325px;
  display: block
}


figcaption{
   
    position: absolute;
    background: #FFF;
    width: 120px;
    padding: 20px;

    -webkit-box-shadow: 0 0 30px grey;
    box-shadow: 0 0 30px grey;
    border-radius: 3px;
    display: block;
    
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    display: flex;
    align-items: center;
}

<figure>
  <img  src="https://picsum.photos/325/600">
  <figcaption> 
			But as much
    </figcaption>
                
</figure>

স্নিপেট প্রসারিত করুন

— Marcogomesr
সূত্র

1

এইচটিএমএল:

<div class="wrapper">
    <div class="inner">
        content
    </div>
</div>

সিএসএস:

.wrapper {
    position: relative;

    width: 200px;
    height: 200px;

    background: #ddd;
}

.inner {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;

    width: 100px;
    height: 100px;

    background: #ccc;
}

এটি এবং আরও উদাহরণ এখানে

1

পৃষ্ঠার কেন্দ্রে হুবহু ভাসতে ডিআইভি পাওয়ার জন্য আমি এটি আবিষ্কার করেছি। সত্যিই কুরুচিপূর্ণ তবে সব ক্ষেত্রেই কাজ করে

বিন্দু এবং ড্যাশ

<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5">
    <table style="position:fixed;" width="100%" height="100%">
        <tr>
            <td style="width:50%"></td>
            <td style="text-align:center">
                <div style="width:200;border: 5 dashed green;padding:10">
                    Perfectly Centered Content
                </div>
            </td>
            <td style="width:50%"></td>
        </tr>
    </table>
</div>

পরিষ্কারক

বাহ যে পাঁচ বছর সবেমাত্র উড়ে গেছে, তাই না?

<div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;padding:5px">
<table style="position:fixed" width="100%" height="100%">
    <tr>
        <td style="width:50%"></td>
        <td style="text-align:center">
            <div style="padding:10px">
                <img src="Happy.PM.png">
                <h2>Stays in the Middle</h2>
            </div>
        </td>
        <td style="width:50%"></td>
    </tr>
</table>

— মিঃ বি
সূত্র

1

.center {
  position: absolute
  left: 50%;
  bottom: 5px;
}

.center:before {
    content: '';
    display: inline-block;
    margin-left: -50%;
}

— AndreyP
সূত্র

0

আপনি চিত্রটি একটি ডিভিতে রাখতে পারেন এবং একটি ডিভি আইডি যুক্ত করতে পারেন এবং সেই ডিভির জন্য সিএসএস করতে পারেন একটি text-align:center

এইচটিএমএল:

<div id="intro_img">

    <img src="???" alt="???">

</div>

সিএসএস:

#intro_img {
    text-align:center;
}

— ডোভরভিন ভনস্ট্রংলে
সূত্র

0

#content { margin:0 auto; display:table; float:none;}

<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

স্নিপেট প্রসারিত করুন

— অমিত বেন্ডে
সূত্র

0

একটি সহজ পদ্ধতির যা অনুভূতভাবে অজানা প্রস্থের একটি ব্লককে অনুভূমিকভাবে কেন্দ্র করতে আমার পক্ষে কাজ করেছে:

<div id="wrapper">
  <div id="block"></div>
</div>

#wrapper { position: absolute; width: 100%; text-align: center; }
#block { display: inline-block; }

ব্লকের সারিবদ্ধকরণের সাথে স্বাধীনভাবে তার বিষয়বস্তু প্রান্তিককরণের জন্য একটি পাঠ্য-প্রান্তিককরণ সম্পত্তি # ব্লক রুলসেটে যুক্ত করা যেতে পারে।

এটি ফায়ারফক্স, ক্রোম, আইই, এজ এবং সাফারি এর সাম্প্রতিক সংস্করণগুলিতে কাজ করেছে।

— টেরেন্স ব্যান্ডোয়ান
সূত্র