නියත වශයෙන්ම ස්ථානගත කර ඇති මූලද්‍රව්‍යයක් කොට් div ාශයක කේන්ද්‍රගත කරන්නේ කෙසේද?

1111

මගේ කවුළුවේ මධ්‍යයේ div(සමග position:absolute;) අංගයක් තැබීමට මට අවශ්‍යය . නමුත් පළල නොදන්නා නිසා මට එසේ කිරීමේ ගැටළු තිබේ.

මම මෙය උත්සාහ කළා. නමුත් පළල ප්‍රතිචාර දක්වන බැවින් එය සකස් කළ යුතුය.

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

මම එය කරන්නේ කෙසේද?

— ඊෂ්
source

4

විවිධ අවස්ථා වලදී සාමාන්‍යකරණය කළ හැකි නිරපේක්ෂ මධ්‍යස්ථාන උදාහරණවල ඔබට උදාහරණයක් තිබේ .

— මිහයි

2

මෙම ප්‍රශ්නයට වඩා හොඳ පිළිතුරක් stackoverflow.com/questions/17976995/…

— ස්විෆ්ට්

1355

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

ස්නිපටය පුළුල් කරන්න

— බොබින්ස්
source

78

නියමයි. මා වෙනුවෙන් වැඩ කළා! මට තිබූ එක් ගැටළුවක්: මා කේන්ද්‍රගත කරමින් සිටි රූපය තරමක් විශාල වූ අතර, මෙය පිටත කොටස පිටුවේ දකුණු දාරයෙන් ඔබ්බට ගොස් තිරස් අනුචලනය වීමට හේතු විය. මම "දකුණ" සඳහා "වම්" සීඑස්එස් දේපල මාරු කර ඇති අතර, තිරයේ වම් කෙළවරට ඉහළින් ගමන් කිරීම අනුචලනය කිරීමට හේතු නොවන බැවින් මෙතෙක් එය වඩා හොඳින් ක්‍රියාත්මක වේ

— බූම්ෂාකා

පරිශීලකයා පිටුව පහළට අනුචලනය කර ඇත්නම්, ඉහළින් overylay දිස් වේ නම්, අනුචලන ගැටළුව විසඳීම සඳහා jquery භාවිතා කිරීම හොඳ අදහසක් වනු ඇතැයි ඔබ සිතනවාද

— PUG

1

අනුචලන නිකුතුව සඳහා එක් විසඳුමක් විය හැකි position: fixedනමුත්

— උඩිස්වරය ගැන උස නොදන්නේ නම්, උඩිස්

3

මෙම තාක්ෂණය භාවිතා කරමින් මා මුහුණ දුන් සුළු ගැටලුවක් තිබේ. පිටත කොටස තිරයේ 50% ක් ගන්නා නිසා, සමහර මාරුවීම් සිදුවන්නේ 50% තිර ප්‍රමාණයට වඩා පෙළ පුළුල් වූ විට ය. මම මෙය විසඳුවේ පිටත කොටස "පළල: 100%" ලෙස සකසා වම් දේපල ඉවත් කිරීමෙනි. අභ්‍යන්තර බෙදීම සඳහා, මම සරලවම මගේ පෙළ-පෙළ පෙළට පෙළගස්වන්නෙමි. මෙය ගැටළුව විසඳයි.

— නිකී එල්

3

ප්‍රතිශතයේ උස මෙම අවස්ථාවේ දී අඩංගු බ්ලොක් එකට සාපේක්ෂව වේ <html>. නමුත් <html>මූලද්‍රව්‍යයට heightනිශ්චිතව දක්වා නොමැති බැවින් එය ලේඛනයේ ඇති සියලුම අන්තර්ගතයන්ගේ උස ගනී, එය කිසිවක් නොව එකම අන්තර්ගතය නිරපේක්ෂව ස්ථානගත වී ඇති නිසා (අන්තර්ගත ප්‍රවාහයෙන් ඉවත් කර ඇත). මූලද්රව්යයට එකතු height: 100%කිරීම මෙයට <html>වෙනසක් කරයි.

— බොබින්ස්

1834

මෙය මට වැඩ කරයි:

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

ස්නිපටය පුළුල් කරන්න

— මතියස් වෙයිලර්
source

37

මම, ඍණ ආන්තිකයන් සම්පූර්ණයෙන්ම වලංගු CSS හා කළ යුතු හරහා ලබා ගැනීමට අවශ්ය නැත වූ "අපිරිසිදු නම්න්" ලෙස සැලකිය යුතුය. W ණාත්මක ආන්තිකයන් W3C කොටු ආකෘති පිරිවිතරයේ සඳහන් වේ. සමහර පුද්ගලයින් අත්තනෝමතික ලෙස එය අනවසරයෙන් තීරණය කරන බව පෙනේ, මන්ද ඔවුන් අ) ඔවුන් නොදන්නා නිසා හෝ ආ) ඔවුන්ගේ නරක CSS නිවැරදි කිරීමට ඒවා භාවිතා කරන බැවිනි.

— ජෝශප් රවෙන්වොල්ෆ්

59

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

— ස්ටෙෆාන්

2

Os ජෝෂුවා මෙය අනෙක් පිළිතුර මෙන් සිරස් අතට නොව තිරස් අතට කේන්ද්‍රගත වේ.

— ygoe

3

දර්ශන විසඳුමේ ප්‍රමාණය වැඩි නොවන බැවින් මම මෙම විසඳුමට කැමැත්තෙමි.

— අයිස්ඩී

13

හරස් බ්‍රව්සර් සහාය සඳහා: widthමෙය වැඩ කිරීම සඳහා නිශ්චිත අගයකට සැකසිය යුතුය. autoහා 100%එම මූලද්රව්යය මධ්යස්ථානය නැහැ. display: block;අත්‍යවශ්‍ය දෙයක්. position: absolute;අත්‍යවශ්‍ය දෙයක් නොවේ. සියලුම අගයන් ක්‍රියාත්මක වනු ඇත. දෙමාපිය මූලද්‍රව්‍ය positionහැර වෙනත් දෙයකට සැකසිය යුතුය static. සැකසීම leftසහ rightකිරීම 0අනවශ්‍යය. margin-left: auto; margin-right: auto;වැඩේ කරයි.

— ඔනුර් යෙල්ඩ්‍රම්

799

ප්‍රතිචාරාත්මක විසඳුම

IE8 සහ ඊට අඩු සහය දැක්වීමට ඔබට අවශ්‍ය නැතිනම් ප්‍රතිචාරාත්මක සැලසුම් හෝ පොදුවේ නොදන්නා මානයන් සඳහා හොඳ විසඳුමක් මෙන්න .

.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%එය මවුපියන්ට සාපේක්ෂව වන අතර translateපරිණාමනය පළල / උස යන මූලද්‍රව්‍යයන්ට සාපේක්ෂ වේ.

මේ ආකාරයෙන් ඔබට පරිපූර්ණ කේන්ද්‍රීය අංගයක් ඇත, නම්‍යශීලී පළල දරුවාට සහ දෙමාපියන්ට. පාරිතෝෂිකය: දරුවා දෙමව්පියන්ට වඩා විශාල වුවද මෙය ක්‍රියාත්මක වේ.

ඔබට මෙය සිරස් අතට කේන්ද්‍රගත කළ හැකිය (නැවතත්, දෙමව්පියන්ගේ සහ දරුවාගේ පළල සහ උස මුළුමනින්ම නම්‍යශීලී විය හැකිය (සහ / හෝ නොදන්නා)):

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

ඔබට transformවිකුණුම්කරුගේ උපසර්ගයද අවශ්‍ය බව මතක තබා ගන්න . උදාහරණයක් වශයෙන්-webkit-transform: translate(-50%,-50%);

— ගැටළු
source

27

IE7 සහය තවදුරටත් අවශ්‍ය නොවන බැවින් මෙය තථ්‍ය විසඳුම විය යුතුය. මෙම විසඳුම වමට වඩා හොඳය: 0 / දකුණ: 0 තාක්‍ෂණය මඟින් මූලද්‍රව්‍ය සම්පූර්ණ පළල වන අතර මෙය පළල රඳවාගෙන නොදන්නා පළලවල මූලද්‍රව්‍ය මත ක්‍රියා කරයි.

— aleemb

52

හොඳම පිළිතුර නම්, මෙය ක්‍රියාත්මක වන්නේ div අඩංගු කොටුව දරුවාට වඩා කුඩා නම් ය.

— නඩුව

2

-චැඩ් ජොන්සන් ඇත්තෙන්ම එය කරයි. webkit-මා යෝජනා කළ පරිදි උපසර්ගය සමඟ එය උත්සාහ කරන්න .

— ProblemsOfSumit

2

-වෙබ්කිට් පිළිබඳ ඔබේ සටහන මට මග හැරුණි. නියමයි.

— චැඩ් ජොන්සන්

3

transform: translateposition: fixedළමුන් තුළ භාවිතයට ගත නොහැකි බවක් පෙනේ . පිළිගත් පිළිතුර මෙම අවස්ථාවේ දී වඩා හොඳින් ක්‍රියා කරයි.

— dmvianna

49

මට අවශ්‍ය වූයේ යමෙකුට එය තනි ඩිවි ටැග් එකකින් කිරීමට අවශ්‍ය නම් මෙහි ඇති මාර්ගයයි:

widthලෙස ගැනීම 900px.

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

මෙම අවස්ථාවේ දී යමෙකු widthකලින් දැනගත යුතුය .

— pratikabu
source

26

"because the width is unknown"... මෙය ප්‍රශ්නයට පිළිතුරු සපයන්නේ නැත

— මයිකල් අයිරෙස්

15

හායි ic මිචෙල් ඇත්ත වශයෙන්ම ඔබ නිරපේක්ෂ බෙදීම කේන්ද්‍රගත කිරීම හා සම්බන්ධ යමක් ගූගල් කරන විට, මෙම සබැඳිය පළමු සබැඳිය ලෙස පැමිණේ. මා වැනි අයෙකු ඉහත විසඳුම සොයන්නේ නම් මම මෙම විසඳුම එකතු කළේ එබැවිනි .. :)

— pratikabu

1

ප්‍රතිචාරාත්මක නිර්මාණ සඳහා එතරම් ප්‍රයෝජනවත් නොවේ, නමුත් මම ප්‍රතිචාරාත්මක නිර්මාණ කිරීමට පටන් ගන්නා තෙක් එය මට වැඩ කළේය. නිරපේක්ෂ ස්ථානගත කර ඇති දන්නා පළල මූලද්‍රව්‍ය කේන්ද්‍රගත කිරීම සඳහා මෙය වලංගු පිළිතුරකි .

— ෂෝන් කෙන්ඩ්ල්

36

නිරපේක්ෂ මධ්‍යස්ථානය

HTML:

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

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;
  
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}

නිරූපණය: http://jsbin.com/rexuk/2/

එය ගූගල් ක්‍රෝම්, ෆයර්ෆොක්ස් සහ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 8 හි අත්හදා බලන ලදි .

— ඉජාස් අමීනුදීන්
source

මෙය ක්‍රියා නොකරයි, කරුණාකර පහත කෝඩපන් codepen.io/anon/pen/YqWxjJ

— මාර්ක්

1

සමාවෙන්න මට වැඩ කරනවා හිතන්නේ නමුත් ඔබ ස්ථාවර උස ඇතුළත් කිරීමට අවශ්ය වන අතර පළල codepen.io/anon/pen/WwxEYQ

— මාක්

32

මෙය සිරස් සහ තිරස් සඳහා ක්‍රියා කරයි:

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

ඔබට දෙමව්පියන්ගේ මූලද්‍රව්‍ය මධ්‍යස්ථානයක් කිරීමට අවශ්‍ය නම්, මවුපියන්ගේ relative ාතියෙකුගේ පිහිටීම සකසන්න:

#parentElement{
    position: relative
}

සිරස් කේන්ද්‍රීය පෙළගැස්ම සඳහා, ඔබේ මූලද්‍රව්‍යයට උස සකසන්න. රාවුල්ට ස්තූතියි .
ඔබට දෙමව්පියන්ගේ මූලද්රව්ය මධ්යස්ථානයක් සෑදීමට අවශ්ය නම්, දෙමව්පියන්ගේ පිහිටීම .ාතියෙකු ලෙස සකසන්න

— මොහ්සෙන් අබ්දුල්ලාහි
source

2

සිරස් අතට වැඩ කිරීම සඳහා ඔබ උස එකතු කළ යුතු යැයි මම සිතමි.

— රාවුල්

මෙම මූලද්රව්ය පිටුවේ මධ්යයේ මිස වෙනත් මූලද්රව්යයක කේන්ද්‍රය මෙන් පෙනේ.

— ගුන්ටර් සුච්බවර්

1

@ GünterZöchbauer ඔව්, ඔබට දෙමව්පියන්ගේ මූලද්‍රව්‍ය කේන්ද්‍රයක් බවට පත් කිරීමට අවශ්‍ය නම්, මවුපියන්ගේ relative ාතියෙකුගේ ස්ථානය සකසන්න.

— මොහ්සෙන් අබ්දුල්ලාහි

21

ඔබට තිරස් හා සිරස් අතට කේන්ද්‍රගත වීමට අවශ්‍ය නම්:

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

— michal.jakubeczy
source

20

විසඳුමක් සොයමින්, මම මීට පෙර පිළිතුරු ලැබුණේ හා අන්තර්ගතය කේන්ද්ර බවට පත් විය හැකි මතියස් යන දෙදෙනා Weiler පිළිතුර , නමුත් භාවිතා text-align:

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

එය ගූගල් ක්‍රෝම් සහ ෆයර්ෆොක්ස් සමඟ වැඩ කළේය.

— කැවිල
source

5

මම හිතන්නේ ඔබට "පෙළ-පෙළගැස්ම: මැද" අවශ්‍ය නොවේ

— ටොබියාස්

මෙය මගේ ගැටලුව මෙහි විසඳා ඇත . ස්තූතියි!

— Volomike

මට "පෙළ-පෙළගැස්ම: කේන්ද්‍රය" අවශ්‍ය වූ අතර, මෙය ක්‍රියාත්මක වූයේ @ ප්‍රොබ්ලම්ස් ඕෆ් සුමිට් විසින් යෝජනා කරන ලද විසඳුම මගේ පෙළ එතීම නිසා ක්‍රියා නොකරයි.

— Nat

20

ප්‍රතිචාරාත්මක විසඳුම

බෙදීමේ මූලද්‍රව්‍යය උපකල්පනය කිරීම තවත් අංශයකි ...

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

<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;
}

ප්රති result ලය මේ වගේ වනු ඇත. කේත ස්නිපටය ධාවනය කරන්න:

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

1

දක්ෂතා. ඇයි අනිත් කෙනා මේකට ආවේ නැත්තේ?

— mesqueeb

ස්තූතියි, සතුටු කේතකරණය

— RealMJDev

14

මෙය අපට ප්‍රයෝජනවත් වූ වෙනත් පිළිතුරු වල එකතුවකි:

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

— ක්‍රෂාලට්
source

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>

ස්නිපටය පුළුල් කරන්න

එයින් කියවෙන්නේ මට a top: 50%සහ a ලබා දෙන්න left: 50%, ඉන්පසු X / Y අක්ෂය දෙකටම පරිවර්තනය කරන්න (අවකාශය සාදන්න)-50% වටිනාකමක් , අර්ථයෙන් “දර්පණ අවකාශයක් සාදන්න” යන්නයි.

එනිසා, මෙය සෑම විටම පෙට්ටියක් (පැති හතරක් ඇත) හි බෙදීම් හතරේම සමාන ඉඩක් නිර්මාණය කරයි.

මෙය:

දෙමව්පියන්ගේ උස / පළල නොදැන වැඩ කරන්න.
ප්‍රතිචාරාත්මකව වැඩ කරන්න.
X හෝ Y අක්ෂය මත වැඩ කරන්න. නැතහොත් දෙකම, මගේ උදාහරණයේ මෙන්.
එය ක්‍රියාත්මක නොවන තත්වයක් මට ඉදිරිපත් කළ නොහැක.

— ඩැනියෙල් මොස්
source

මෙය ක්‍රියාත්මක නොවන තත්වයක් ඔබ සොයා ගන්නේ නම් කරුණාකර මට දන්වන්න එවිට මට ඔබේ ආදානය සමඟ ප්‍රශ්නය සංස්කරණය කළ හැකිය.

— ඩැනියෙල් මොස්

පරිණාමනය / පරිවර්තනය මගින් සෆාරි යම් ප්‍රමාණයකින් පෙළ බොඳ කිරීමට හේතු වේ

— ජේම්ස් ටැන්

An ඩැනියෙල්මොස් භාවිතා නොකිරීමට කිසියම් හේතුවක් 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
source

12

නිරපේක්ෂ ස්ථානගත කරන ලද බෙදීමක් කේන්ද්‍රගත කිරීම සඳහා ෆ්ලෙක්ස්බොක්ස් භාවිතා කළ හැකිය.

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>

ස්නිපටය පුළුල් කරන්න

— ධවාල් ජාර්දොෂ්
source

මගේ තිරය මත-ෆයර්ෆොක්ස් 68.x, එය නොගැලපේ, නිරපේක්ෂ කොටස සාපේක්ෂ බ්ලොක් පතුලේ දිස් වේ

— වෙබ් වුමන්

ඔබට මෙය උත්සාහ කළ හැකිද display: -webkit-flex;?

— ධවාල් ජාර්දොෂ්

11

<div style='position:absolute; left:50%; top:50%; transform: translate(-50%, -50%)'>
    This text is centered.
</div>

මෙමඟින් div තුළ ඇති සියලුම වස්තූන් ස්ථානීය ස්ථිතික හෝ සාපේක්ෂ ලෙස කේන්ද්‍රගත වේ.

— උත්කර්ෂ් තියාගි
source

මට අනුව මෙය කළ හැකි හොඳම ක්‍රමය මෙයයි .. එසේම බහුලව භාවිතා වන

— Utkarsh Tyagi

නැවත " 059%" : ඔබ අදහස් කළේ " 50%" ද ? එසේ නම්, කරුණාකර ඔබේ පිළිතුර සංස්කරණය කිරීමෙන් ප්‍රතිචාර දක්වන්න .

— පීටර් මෝර්ටෙන්සන්

7

මා දන්නා පරිදි, නොදන්නා පළලක් සඳහා මෙය සාක්ෂාත් කරගත නොහැකිය.

ඔබට එය කළ හැකි නම් - එය නොපෙනෙන මූලද්‍රව්‍යයක් 100% පළල හා උසකින් ස්ථානගත කළ හැකි අතර, මූලද්‍රව්‍යය එහි ආන්තිකය භාවිතා කර කේන්ද්‍රගත කර ගන්න: ස්වයංක්‍රීය හා සමහරවිට සිරස්-පෙළගැස්වීම. එසේ නොමැතිනම් ඔබට එය කිරීමට JavaScript අවශ්‍ය වේ.

— පෙක්කා
source

"ආන්තිකය: ස්වයංක්‍රීය" දේ සඳහා +1. "ආන්තිකය: 0 ස්වයංක්‍රීය" - සිරස් ආන්තිකයන්ට අදාළ වන "0" සහ තිරස් අතට "ස්වයංක්‍රීය" යන රේඛාව භාවිතා කරමින් තිරස් අතට බෙදීමට මම මීට පෙර උත්සාහ කර ඇත්තෙමි. Thick න සුදු මායිම් 2 පිටුවේ දෙපැත්තෙන් ලබා ගැනීම සඳහා ඉහළ මට්ටමේ අංශයට ස්ටැක් ඕවර්ෆ්ලෝ භාවිතා කරන්නේ මෙය යැයි මම සිතමි. කෙසේ වෙතත්, CSS ආන්තිකයේ W3Schools පිටුවේ ස්වයංක්‍රීය අගය සඳහා "මෙහි ප්‍රති result ලය බ්‍රව්සරය මත රඳා පවතී" - විවිධ බ්‍රව්සර් හරහා මම එය පෞද්ගලිකව උත්සාහ කර නැත, එබැවින් මට මේ කාරණය ගැන අදහස් දැක්විය නොහැක (නමුත් එය පැහැදිලිවම ඔවුන්ගෙන් සමහරක් තුළ උපක්‍රමය කරයි)

— Steg

1

IE8 ගැටළුවක් නොවේ නම් නොදන්නා පළලකට (සහ උසකට) එය කළ හැකිය. විස්තර සඳහා මගේ පිළිතුර බලන්න.

— ProblemsOfSumit

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>

— Vial
source

6

මෙය සිදු කිරීම සඳහා ප්‍රයෝජනවත් jQuery ප්ලගිනයක් මෙන්න. මම එය මෙහි සොයාගත්තා . එය හුදෙක් CSS වලින් කළ හැකි යැයි මම නොසිතමි.

/**
 * @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)
    });
};

— බෙන් ෂෙලොක්
source

මෙය වඩා හොඳ ක්‍රමය වන අතර විශේෂයෙන් ප්‍රතිගාමී නිර්මාණ සමඟ.

— m4tm4t

ඕනෑම අවස්ථාවක jQuery භාවිතා කළේ නම් එය ඉතා සුළු කාරණයක් වනු ඇත

— කේත විස්පර්

8

මෙය වඩා හොඳ ක්‍රමය නොවේ. හැකි සෑම විටම CSS භාවිතා කිරීම වඩා හොඳය. සෑම අක්ෂයකම CSS සමඟ සහ ප්‍රතිචාර දක්වන පිටු සඳහා DIV කේන්ද්‍රගත කිරීම කළ හැකිය. ජාවාස්ක්‍රිප්ට් අවශ්‍ය නොවේ!

— ProblemsOfSumit

1

cyckart සහ මේ අවස්ථාවේ මෙවලම CSS වේ.

— ProblemsOfSumit

5

පෙර ප්‍රතිචාරාත්මක විසඳුමක සාස් / මාලිමා අනුවාදය :

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

— ඇඩම් ස්පෙන්ස්
source

4

transform: translate(-50%, -50%)වෙබ්කිට් බ්‍රව්සර් භාවිතා කරමින් OS X හි පෙළ සහ අනෙකුත් සියලුම අන්තර්ගතයන් බොඳ කරයි. keithclark.co.uk/articles/gpu-text-rendering-in-webkit

— යෂා

-webkit-font-smoothing: antialiased;ඔබ btw පළ කළ ලිපියෙන් මම එය ලබා ගත්තාට ඔබ කැමති ප්‍රතිඔක්සිකාරක වර්ගය භාවිතා කරන්න !

— ඇඩම් ස්පෙන්ස්

4

මා කැමති කේන්ද්‍රගත කිරීමේ ක්‍රමය:

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

නිරපේක්ෂ බ්ලොක් මූලද්‍රව්‍ය ස්ථානගත කිරීම
ආන්තික ස්වයංක්‍රීය
එකම වම් / දකුණ, ඉහළ / පහළ

JSFiddle මෙහි ඇත.

— vp_arth
source

4

මෙය මට ප්‍රයෝජනවත් විය:

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

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

— ඇලන්
source

එය වසර 5 කට පසුව at මතියස් වෙයිලර්ගේ පිළිතුරයි.

— aloisdg codidact.com වෙත මාරු වීම

3

#container
{
  position: relative;
  width: 100%;
  float: left
}

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

— බර්කු AKCAOGLU
source

3

HTML:

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

CSS:

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

_{මම දැනටමත් පිළිතුරක් ලබා දී ඇති බව මම දනිමි. මගේ පෙර පිළිතුර සහ ලබා දී ඇති අනෙක් අය සමඟ හොඳින් ක්‍රියා කරයි. නමුත් මම මෙය අතීතයේ දී භාවිතා කර ඇති අතර එය සමහර බ්‍රව්සර්වල සහ ඇතැම් අවස්ථාවන්හිදී වඩා හොඳින් ක්‍රියා කරයි. ඒ නිසා මම හිතුවා මමත් මේ පිළිතුර දෙන්නම් කියලා. මම මගේ පෙර පිළිතුර "සංස්කරණය" කර එය එකතු නොකළේ මෙය මුළුමනින්ම වෙනම පිළිතුරක් යැයි මට හැඟෙන නිසා සහ මා විසින් සපයා ඇති දෙක සම්බන්ධ නොවන බැවිනි.}

— ඩස්ටින් පොයිසන්ට්
source

2

HTML

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

CSS

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

http://jsfiddle.net/f51rptfy/

— ඩස්ටින් පොයිසන්ට්
source

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>

ස්නිපටය පුළුල් කරන්න

— මෝ.
source

2

මෙම ප්‍රශ්නයේ පිළිගත් විසඳුම මගේ නඩුව සඳහා සාර්ථක වූයේ නැත ...

මම සමහර පින්තූර සඳහා ශීර්ෂ පා doing යක් කරමින් සිටිමි.

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>

ස්නිපටය පුළුල් කරන්න

— මාකෝගෝමර්
source

1

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

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

— ඇන්ඩ්‍රි පී
source

1

මෙය පිටුවක මධ්‍යයේ හරියටම පාවීමට DIV ලබා ගැනීම සඳහා මා විසින් සොයාගත් උපක්‍රමයකි. ඇත්තෙන්ම එය කැතයි, නමුත් එය සියලු බ්‍රව්සර් වල ක්‍රියා කරයි.

තිත් සහ ඩෑෂ්

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

— බී මහතා
source

1

HTML:

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

CSS:

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

මෙය සහ තවත් උදාහරණ මෙහි ඇත.

— පීටර් මෝර්ටෙන්සන්
source

0

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

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

ස්නිපටය පුළුල් කරන්න

— amit bende
source

0

බහාලුම් / එතීමේ මූලද්‍රව්‍යය වෙනස් කිරීමට මට අවශ්‍ය නොවූ බැවින් විසඳුම් කිසිවක් මා වෙනුවෙන් ක්‍රියාත්මක නොවීය. මෙම කේතය මා වෙනුවෙන් වැඩ කළේය:

position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;

— නික් කේ
source