CSS භාවිතා කර <div>වෙනත් තැනක තිරස් අතට කේන්ද්‍රගත කරන්නේ කෙසේද <div>?

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

ඔබට මෙම CSS අභ්‍යන්තරයට යෙදිය හැකිය <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

ඇත්ත වශයෙන්ම, ඔබ එය සැකසිය යුතු widthනැත 50%. අඩංගු පළලට වඩා අඩු ඕනෑම පළලක් <div>ක්‍රියා කරයි. මෙම margin: 0 autoසැබෑ කේන්ද්ර එහෙම කරනවා.

ඔබ ඉලක්ක කරන්නේ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 8 (සහ පසුව), ඒ වෙනුවට මෙය තිබීම වඩා හොඳ විය හැකිය:

#inner {
  display: table;
  margin: 0 auto;
}

එය අභ්‍යන්තර මූලද්‍රව්‍ය කේන්ද්‍රය තිරස් අතට හරවන අතර එය නිශ්චිත සැකසුමකින් තොරව ක්‍රියා කරයි width.

මෙහි වැඩ කරන උදාහරණය:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

අභ්‍යන්තරයේ ස්ථාවර පළලක් සැකසීමට ඔබට අවශ්‍ය නැතිනම් ඔබට divමේ වගේ දෙයක් කළ හැකිය:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

එමඟින් අභ්‍යන්තරය divකේන්ද්‍රගත කළ හැකි පේළිගත මූලද්‍රව්‍යයක් බවට පත් කරයි text-align.

හොඳම ප්රවේශයන් CSS 3 සමඟ ය .

කොටු ආකෘතිය:

#outer {
  width: 100%;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

#inner {
  width: 50%;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

ඔබගේ භාවිතයට අනුව ඔබට box-orient, box-flex, box-directionගුණාංග ද භාවිතා කළ හැකිය .

නම්‍යතාවය :

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

ළමා අංග කේන්ද්‍රගත කිරීම ගැන වැඩිදුර කියවන්න

• සබැඳිය 2

• සබැඳිය 3

• සබැඳිය 4

හා මෙම කොටුව ආදර්ශ හොඳම ප්රවේශය සිටින්නේ මන් ද යන්න පැහැදිලි :

• W3C කොටු ආකෘතිය වඩා හොඳ ලෙස සලකන්නේ ඇයි?

ඔබේ කොටස පික්සල් 200 ක් පළල යැයි සිතමු:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

මව් මූලද්රව්යය ස්ථානගත කර ඇති බවට වග බලා ගන්න , එනම් සාපේක්ෂ, ස්ථාවර, නිරපේක්ෂ හෝ ඇලෙන සුළුය.

ඔබේ කොටසෙහි පළල ඔබ නොදන්නේ නම්, ඔබට transform:translateX(-50%);negative ණ ආන්තිකය වෙනුවට භාවිතා කළ හැකිය .

https://jsfiddle.net/gjvfxxdj/

සමග CSS Calc () , මෙම කේතය පවා සරල ලබා ගත හැක:

.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

මූලධර්මය තවමත් සමාන ය; අයිතමය මැදට දමා පළල සඳහා වන්දි ගෙවන්න.

සිරස් සහ තිරස් අතට ගන්නේ කෙසේද යන්න පෙන්වීමට මම මෙම උදාහරණය නිර්මාණය කර ඇත්තෙමි . align

කේතය මූලික වශයෙන් මෙයයි:

#outer {
  position: relative;
}

හා...

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

centerඔබ ඔබේ තිරයේ ප්‍රමාණය වෙනස් කළ විට පවා එය පවතිනු ඇත .

සමහර පෝස්ටර් වල CSS 3 කේන්ද්‍රය භාවිතා කරන ආකාරය සඳහන් කර display:boxඇත.

මෙම වාක්‍ය ඛණ්ඩය යල්පැන ඇති අතර එය තවදුරටත් භාවිතා නොකළ යුතුය. [ මෙම ලිපියද බලන්න ] .

එබැවින් මෙහි සම්පූර්ණත්වය සඳහා නම්යශීලී කොටු පිරිසැලසුම් මොඩියුලය භාවිතා කරමින් CSS 3 කේන්ද්‍රගත කිරීමේ නවතම ක්‍රමය වේ .

එබැවින් ඔබට සරල සලකුණු කිරීමක් තිබේ නම්:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... ඔබට ඔබේ අයිතම කොටුව තුළ කේන්ද්‍රගත කිරීමට අවශ්‍ය නම්, මව් මූලද්‍රව්‍යයේ (.box) ඔබට අවශ්‍ය දේ මෙන්න:

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

නම්‍යශීලි කොටුව සඳහා පැරණි සින්ටැක්ස් භාවිතා කරන පැරණි බ්‍රව්සර් සඳහා ඔබට සහාය වීමට අවශ්‍ය නම් මෙන්න බැලීමට හොඳ තැනක්.

ඔබට ස්ථාවර පළලක් සැකසීමට අවශ්‍ය නැතිනම් අමතර ආන්තිකය අවශ්‍ය නොවන්නේ නම්, display: inline-blockඔබේ අංගයට එක් කරන්න.

ඔයාට පාවිච්චි කරන්න පුළුවන්:

#element {
    display: table;
    margin: 0 auto;
}

නොදන්නා උස හා පළල බෙදීමක් කේන්ද්‍රගත කිරීම

තිරස් හා සිරස් අතට. එය සාධාරණ ලෙස නවීන බ්‍රව්සර් සමඟ ක්‍රියා කරයි (ෆයර්ෆොක්ස්, සෆාරි / වෙබ්කිට්, ක්‍රෝම්, ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 10, ඔපෙරා, ආදිය)

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

<div class="content">This works with any content</div>

තව දුරටත් කෝඩපෙන් හෝ ජේඑස්බින් මත ටින්කර් .

ඔබ එයට පළලක් ලබා නොදෙන්නේ නම් එය කේන්ද්‍රගත කළ නොහැක. එසේ නොමැති නම්, එය පෙරනිමියෙන් මුළු තිරස් අවකාශය ගනී.

CSS 3 හි කොටු-පෙළගැස්වීමේ දේපල

#outer {
    width: 100%;
    height: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

සකසන්න widthහා කට්ටලයක් margin-leftහා margin-rightකිරීමට auto. එය තිරස් සඳහා පමණි . ඔබට ක්‍රම දෙකම අවශ්‍ය නම්, ඔබ එය දෙයාකාරයෙන්ම කරනු ඇත. අත්හදා බැලීමට බිය නොවන්න; එය ඔබ කිසිවක් බිඳ දමන්නාක් මෙන් නොවේ.

මට මෑතකදී "සැඟවුණු" බෙදීමක් (එනම්, display:none; ) කේන්ද්‍රගත කිරීමට සිදු වූ අතර එය තුළ වගුගත කළ ආකෘතියක් පිටුවේ කේන්ද්‍රගත විය යුතුය. සැඟවුණු කොටස පෙන්වීම සඳහා මම පහත දැක්වෙන jQuery කේතය ලියා පසුව CSS අන්තර්ගතය ස්වයංක්‍රීයව ජනනය කරන ලද පළලට යාවත්කාලීන කර එය කේන්ද්‍රගත කිරීමට ආන්තිකය වෙනස් කරමි. (සබැඳිය ක්ලික් කිරීමෙන් දර්ශන ටොගලය අවුලුවන නමුත් මෙම කේතය ප්‍රදර්ශනය කිරීමට අවශ්‍ය නොවීය.)

සටහන: මම මෙම කේතය බෙදාගන්නේ, ගූගල් විසින් මෙම සිරස් පිටාර ගැලීමේ විසඳුම වෙත මා ගෙන ආ නිසා සහ සැඟවුණු මූලද්‍රව්‍යයන්ට පළලක් නොමැති අතර ඒවා දර්ශනය වූ පසු ප්‍රමාණය වෙනස් කළ නොහැක.

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>

මම සාමාන්‍යයෙන් එය කරන්නේ නිරපේක්ෂ පිහිටීම භාවිතා කිරීමෙනි:

#inner{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

මෙය ක්‍රියාත්මක කිරීම සඳහා පිටත අංශයට අමතර නිසි විධිවිධාන අවශ්‍ය නොවේ.

ෆයර්ෆොක්ස් සහ ක්‍රෝම් සඳහා:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර්, ෆයර්ෆොක්ස් සහ ක්‍රෝම් සඳහා:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

මෙම text-align:දේපල නවීන බ්රවුසරයන් සඳහා විකල්ප වේ, නමුත් එය උරුමය බ්රව්සර සහාය සඳහා Internet Explorer Quirks ප්රකාරය අවශ්ය වේ.

භාවිත:

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}

<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

එක් මූලද්‍රව්‍යයක් සඳහා පළලක් සැකසීමකින් තොරව මේ සඳහා තවත් විසඳුමක් වන්නේ CSS 3 transformගුණාංගය භාවිතා කිරීමයි .

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

උපක්‍රමය නම් එය translateX(-50%)සකසයි#inner මූලද්‍රව්‍යය පළලෙන් සියයට 50 ක් වමට . සිරස් පෙලගැස්ම සඳහා ඔබට එකම උපක්‍රමය භාවිතා කළ හැකිය.

මෙන්න තිරස් හා සිරස් පෙලගැස්ම පෙන්වන ෆිදෙල් .

වැඩි විස්තර මොසිල්ලා සංවර්ධක ජාලයේ ඇත.

තම බ්ලොග් අඩවියේ 'නොදන්නා දේ කේන්ද්‍රගත කිරීම' පිළිබඳ විශිෂ්ට ලිපියක් ලියූ ක්‍රිස් කොයියර් . එය බහුවිධ විසඳුම් වල වටපිටාවකි. මෙම ප්‍රශ්නයේ පළ නොකළ එකක් මම පළ කළෙමි. එයට ෆ්ලෙක්ස්බොක්ස් විසඳුමට වඩා බ්‍රව්සර් සහාය ඇත , ඔබ display: table;වෙනත් දේවල් බිඳ දැමිය හැකි ඒවා භාවිතා නොකරයි .

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

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
  overflow: hidden;
}

/* The element to be centered, can
   also be of any width and height */
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

මම මෑතකදී ප්රවේශයක් සොයා ගත්තා:

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

නිවැරදිව ක්‍රියා කිරීමට මූලද්‍රව්‍ය දෙකම එකම පළල විය යුතුය.

උදාහරණයක් ලෙස, මෙම සබැඳිය සහ පහත දැක්වෙන කොටස බලන්න:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}

<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

ඔබට දෙමව්පියන් යටතේ දරුවන් විශාල ප්‍රමාණයක් සිටී නම්, ඔබේ CSS අන්තර්ගතය ෆෙඩෙල් හි මෙම උදාහරණයට සමාන විය යුතුය .

HTML අන්තර්ගත පෙනුම මෙයට කැමතියි:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

ඉන්පසු මෙම උදාහරණය ෆෙඩෙල් මත බලන්න .

තිරස් අතට පමණක් කේන්ද්‍රගත කිරීම

මගේ අත්දැකීම් අනුව, කොටුවක් තිරස් අතට කේන්ද්‍රගත කිරීමට ඇති හොඳම ක්‍රමය පහත සඳහන් ගුණාංග යෙදීමයි:

කන්ටේනරය:

• තිබිය යුතුය text-align: center;

අන්තර්ගත කොටුව:

• තිබිය යුතුය display: inline-block;

නිරූපණය:

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

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

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

මෙම ෆෙඩල් ද බලන්න !

තිරස් අතට හා සිරස් අතට කේන්ද්‍රගත කිරීම

මගේ අත්දැකීම් දී, කොටුව මධ්යස්ථානය වෙත හොඳම ක්රමය යන දෙකම සිරස්ව හා තිරස්ව අතිරේක රුවනයකි භාවිතා කරන අතර පහත සඳහන් ගුණ අයදුම් කිරීමට ය:

පිටත භාජනය:

• තිබිය යුතුය display: table;

අභ්යන්තර භාජනය:

• තිබිය යුතුය display: table-cell;
• තිබිය යුතුය vertical-align: middle;
• තිබිය යුතුය text-align: center;

අන්තර්ගත කොටුව:

• තිබිය යුතුය display: inline-block;

නිරූපණය:

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

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

.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">
      Center this!
    </div>
  </div>
</div>

මෙම ෆෙඩල් ද බලන්න !

පහසුම ක්‍රමය:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

<div id="outer">
  <div id="inner">Blabla</div>
</div>

අන්තර්ගතයේ පළල නොදන්නේ නම් ඔබට පහත ක්‍රමය භාවිතා කළ හැකිය . අපට මෙම මූලද්රව්ය දෙක ඇතැයි සිතමු:

• .outer - සම්පූර්ණ පළල
• .inner - පළල කට්ටලයක් නොමැත (නමුත් උපරිම පළල නියම කළ හැකිය)

මූලද්‍රව්‍යවල ගණනය කළ පළල පිළිවෙලින් පික්සල් 1000 ක් සහ පික්සල් 300 ක් යැයි සිතමු. පහත පරිදි ඉදිරියට යන්න:

1. ඔතා .innerඇතුළත.center-helper
2. සාදන්න .center-helperපේළිගත ; එය .innerපික්සල් 300 ක් පළල බවට පත් කරන ප්‍රමාණයට සමාන වේ .
3. තල්ලුව .center-helperමවුපියන්ට සාපේක්ෂව 50% දකුණට ; මෙමඟින් එහි වම්පස පික්සල් 500 ක් වේ. පිටත.
4. තල්ලුව .innerමවුපියන්ට සාපේක්ෂව 50% ක් වමට ; මෙමඟින් එහි වම්පස පික්සල් -150 ක් වේ. මධ්‍ය උපකාරකය යනු එහි වම්පස 500 - 150 = 350 පික්සල් වේ. පිටත.
5. .outerතිරස් අනුචලන තීරුව වැළැක්වීම සඳහා සැඟවුණු පිටාර ගැලීම සකසන්න .

නිරූපණය:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}

<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

ඔබට මේ වගේ දෙයක් කළ හැකිය

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

මෙය #innerසිරස් අතට පෙළගස්වනු ඇත. ඔබට අවශ්‍ය නැතිනම්, displayසහ vertical-alignගුණාංග ඉවත් කරන්න ;

මෙන්න ඔබට අවශ්‍ය කෙටිම ආකාරයෙන්.

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}

පෙළ පෙළගැස්වීම: මැද

text-align: centerපේළිගත කොටුව තුළ පේළිගත අන්තර්ගතයන් යෙදීම කේන්ද්‍රගත වී ඇත. කෙසේ වෙතත් අභ්‍යන්තර අංශයට පෙරනිමියෙන් width: 100%ඔබට නිශ්චිත පළලක් සැකසිය යුතුය හෝ පහත සඳහන් එකක් භාවිතා කළ යුතුය:

• display: block
• display: inline
• display: inline-block

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

ආන්තිකය: ස්වයංක්‍රීයව 0

භාවිතා margin: 0 autoකිරීම තවත් විකල්පයක් වන අතර එය පැරණි බ්‍රව්සර් අනුකූලතාවයට වඩාත් සුදුසු වේ. එය සමඟ ක්රියා කරයි display: table.

#inner {
  display: table;
  margin: 0 auto;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Flexbox

display: flexබ්ලොක් මූලද්‍රව්‍යයක් ලෙස හැසිරෙන අතර නම්‍යශීලී කොටුව ආකෘතියට අනුව එහි අන්තර්ගතය දක්වයි. එය සමඟ ක්රියා කරයි justify-content: center.

කරුණාකර සටහන් කරන්න: Flexbox බොහෝ බ්‍රව්සර් සමඟ අනුකූල වන නමුත් සියල්ලම නොවේ. බ්‍රව්සර් අනුකූලතාවයේ සම්පූර්ණ හා යාවත්කාලීන ලැයිස්තුවක් සඳහා මෙහි බලන්න .

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

පරිවර්තනය

transform: translateCSS දෘශ්‍ය හැඩතල ගැන්වීමේ ආකෘතියේ ඛණ්ඩාංක අවකාශය වෙනස් කිරීමට ඔබට ඉඩ සලසයි. එය භාවිතා කිරීමෙන් මූලද්‍රව්‍ය පරිවර්තනය කළ හැකිය, භ්‍රමණය කළ හැකිය, පරිමාණය කළ හැකිය. මධ්යස්ථානය වෙත තිරස් අතට එය අවශ්ය position: absoluteහා left: 50%.

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

<center> (අවලංගු කරන ලදි)

ටැගය <center>යනු HTML විකල්පයයි text-align: center. එය පැරණි බ්‍රව්සර් සහ බොහෝ නව ඒවා මත ක්‍රියා කරන නමුත් මෙම අංගය යල්පැන ඇති බැවින් එය වෙබ් ප්‍රමිතීන්ගෙන් ඉවත් කර ඇති බැවින් එය හොඳ භාවිතයක් ලෙස නොසැලකේ .

#inner {
  display: inline-block;
}

<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>

display: flexඔබේ පිටත කොටස සඳහා භාවිතා කළ හැකි අතර තිරස් අතට ඔබ එකතු කළ යුතුයjustify-content: center

#outer{
    display: flex;
    justify-content: center;
}

හෝ ඔබට තවත් අදහස් සඳහා w3 පාසල් - CSS නම්‍යශීලී දේපල වෙත පිවිසිය හැකිය .

ෆ්ලෙක්ස් 97% කට වඩා බ්‍රව්සර් ආධාරක ආවරණයක් ඇති අතර පේළි කිහිපයක් තුළ මෙවැනි ගැටළු විසඳීමට හොඳම ක්‍රමය විය හැකිය:

#outer {
  display: flex;
  justify-content: center;
}

හොඳයි, සියලු තත්වයන්ට ගැලපෙන විසඳුමක් සොයා ගැනීමට මට හැකි විය, නමුත් ජාවාස්ක්‍රිප්ට් භාවිතා කරයි:

මෙන්න ව්යුහය:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

මෙන්න ජාවාස්ක්‍රිප්ට් ස්නිපටය:

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

ඔබට එය ප්‍රතිචාරාත්මක ප්‍රවේශයකින් භාවිතා කිරීමට අවශ්‍ය නම්, ඔබට පහත සඳහන් දෑ එකතු කළ හැකිය:

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

මෙම ක්‍රමය ද හොඳින් ක්‍රියාත්මක වේ:

div.container {
   display: flex;
   justify-content: center; /* For horizontal alignment */
   align-items: center;     /* For vertical alignment   */
}

අභ්යන්තරය සඳහා <div>, එකම කොන්දේසිය වන්නේ එය heightසහ widthඑහි බහාලුම් වලට වඩා විශාල නොවිය යුතුය.

මා සොයාගත් එක් විකල්පයක් තිබේ:

සෑම කෙනෙකුම භාවිතා කිරීමට පවසයි:

margin: auto 0;

නමුත් තවත් විකල්පයක් තිබේ. දෙමව්පියන් සඳහා මෙම දේපල සකසන්න. එය ඕනෑම වේලාවක පරිපූර්ණව ක්‍රියා කරයි:

text-align: center;

බලන්න, ළමයා යන්න කේන්ද්‍රය.

අවසාන වශයෙන් ඔබ වෙනුවෙන් CSS:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}