සියලුම බ්‍රව්සර් සඳහා div එකක් සිරස් අතට කේන්ද්‍රගත කරන්නේ කෙසේද?

1390

මට divCSS සමඟ සිරස් අතට කේන්ද්‍රගත කිරීමට අවශ්‍යයි . මට වගු හෝ ජාවාස්ක්‍රිප්ට් අවශ්‍ය නැත, නමුත් පිරිසිදු CSS පමණි. මම විසඳුම් කිහිපයක් සොයා ගත්තෙමි, නමුත් ඒ සියල්ලටම ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 6 සහාය නොමැත.

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

divඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 6 ඇතුළු සියලුම ප්‍රධාන බ්‍රව්සර්වල සිරස් අතට කේන්ද්‍රගත වන්නේ කෙසේද ?

css  cross-browser  alignment  vertical-alignment  centering 
— බුරාක් අර්ඩම්
source
25
ArMarcoDemaio tablesමෙහි පිරිසැලසුම් සඳහා මිනිසුන් නිරන්තරයෙන් කෝප වන්නේ නැද්ද?
— චුඩ් 37
14
Ud Chud37: එය ඔබ කළ යුතු දේ මත රඳා පවතී, පිරිසැලසුම සඳහා වගු සාමාන්‍යයෙන් බහුකාර්ය නොවන අතර කේත ටයිප් කිරීමට දිගු වේ, css සමඟ ඔබට පහසුවෙන් 2 තීරු පිරිසැලසුමක් 3/4/5 සොල්ස් පිරිසැලසුමක් බවට වෙනස් කළ හැකිය. පරිපූර්ණ හරස් බ්‍රව්සර් වගුවකින් ඉටු කළ හැකි එවැනි සරල කාර්යයක් සඳහා සීඑස්එස් ඉඟි සහ උපක්‍රම දුසිම් ගණනක් භාවිතා කිරීම වෙනස් ය, එය දොර භාවිතා කරනවා වෙනුවට කවුළුව හරහා ඔබේ නිවසට ඇතුළු වීමට උත්සාහ කිරීමක් වැනිය.
— මාකෝ ඩෙමියෝ
පැරණි බ්‍රව්සර් සහාය ගැන මිනිසුන් තැකීමක් නොකරන්නේ නම්: davidwalsh.name/css-vertical-center
— Karolis Šarapnickis
1
css-vertical-center.com බ්‍රව්සර් අනුකූලතා තොරතුරු සමඟ විසඳුම් කිහිපයක් තිබේ
— EscapeNetscape
2
එය කළ හැකි ක්‍රම රාශියක් මෙන්න css-tricks.com/centering-css-complete-guide
— මයිකල් යූරින්

Answers:

1386

ස්ථාවර පළල, නම්‍යශීලී උස අන්තර්ගත කොටුවක් සිරස් අතට හා තිරස් අතට කේන්ද්‍රගත කිරීම සඳහා මට ගොඩනගා ගත හැකි හොඳම විසඳුම පහත දැක්වේ . එය ෆයර්ෆොක්ස්, ඔපෙරා, ක්‍රෝම් සහ සෆාරි හි මෑත සංස්කරණ සඳහා පරීක්ෂා කර වැඩ කරන ලදී.

.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>
ස්නිපටය පුළුල් කරන්න

ගතික අන්තර්ගතයන් සමඟ වැඩ කරන උදාහරණයක් බලන්න

නම්‍යශීලී බව පරීක්ෂා කිරීම සඳහා මම යම් ගතික අන්තර්ගතයක් ගොඩනගා ඇති අතර යමෙකු එහි කිසියම් ගැටළුවක් ඇත්දැයි දැන ගැනීමට කැමතියි. කේන්ද්‍රීය ආවරණ සඳහාද එය හොඳින් ක්‍රියා කළ යුතුය - ලයිට් බොක්ස්, උත්පතන යනාදිය.

— බිල්බාඩ්
source
"නිරපේක්ෂ" පිටත ඩීඅයිවී නොමැතිව, පිටුවට පෙර ඇති ඕනෑම අන්තර්ගතයක් මුළු කොටසම පහළට තල්ලු කරනු ඇත. මෙය වෙනත් පිටු අන්තර්ගතයන්ගෙන් වඩා ස්වාධීන කරයි.
— බිල්බාඩ්
9
.outer {position:absolute;width:100%;height:100%}අවශ්‍ය නොවේ, ඒවා මෙහි නිරූපණය කිරීම සඳහා ය. අපට අවශ්‍ය වන්නේ display:tableමා මෙන් යමෙකු ව්‍යාකූල වී ඇත්නම් පමණි.
— gfaceless
අනුචලන තීරු වළක්වා ගැනීමට මෙය 99% ක් අවශ්‍ය බව මම දුටුවෙමි. වඩා වැදගත්, මෙය පළමු divs දෙකක් පමණක් ක්රියා, හඬක් තබා .outerහා middleහා පැහැදිලි ලෙස නොසලකා හරින .innerහා එහි ශෛලිය. මම දන්නේ නැහැ දක්වාම දේ margin-left, margin-rightඒ තිරස් අතට එම මූලද්රව්යය මධ්යස්ථානය නොවන බැවිනි ස්වයංක්රීය කට්ටලයක් ?? !!!
— user10089632
ඉවත් කිරීම width: 100%;සහ එකතු margin: 0 autoකිරීම .outerවිචල්‍ය පළල සඳහා ඉඩ ලබා දේ.
— රොකෝකෝ
100 user10089632 නැත, එය පළල හෝ උස නොව පිහිටීම නොවේ. top: 0; left 0;පෙරනිමිය 1 ලෙස සකසන Chrome හි අවම වශයෙන් අස්ථානගත වී ඇත
— මයිකල් වොලිස්කි
282

ලැයිස්තුවේ මට නොපෙනෙන තවත් එකක්:

.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අන්තර්ගත පිටාර ගැලීම වැළැක්වීම සඳහා නිර්දේශිත සැකසුම (පිටාර ගැලීම බලන්න)

මූලාශ්‍රය: CSS හි නිරපේක්ෂ තිරස් හා සිරස් කේන්ද්‍රගත කිරීම

— යෙසෙලා
source
7
මෙය මට වැඩ කළ නමුත් කිසියම් හේතුවක් නිසා මට ක්‍රෝම් වල ස්ථාවර පළල සහ උස තිබිය යුතුය
— රයන් නෙල්
1
ඔබට ස්තුතියි. මට px උස හෝ පළල ගණනය කිරීමට අවශ්‍ය නොවන තැනක නිවැරදි කිරීමක් අවශ්‍ය වූ අතර මෙය මනාව ක්‍රියාත්මක විය.
— GFoley83
8
විශිෂ්ට විසඳුමක්, විශේෂයෙන් ඔබට දෙමව්පියන් අවශ්‍ය නොවන නිසා
— ලූකා ස්ටීබ්
1
ඒ හැරෙන්නට උස සවි කර නොමැති නම් මෙය දිගු කරයි: හොඳ විසඳුමක්
— බාර්ට් බර්ග්
ඔබට පළල සහ උස 100% ක් නොමැති නම් භාවිතා කරන්නmargin: auto;
— චාල්ස් එල්.
257

සරලම ක්‍රමය වනුයේ පහත දැක්වෙන CSS පේළි 3 ය:

1) පිහිටීම: සාපේක්ෂ;

2) ඉහළ: 50%;

3) පරිණාමනය: පරිවර්තන වයි (-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
source
4
සටහන: පිටත කොටසේ උස "min-height: 170px" ලෙස සකසා තිබේ නම් නිවැරදිව ක්‍රියා නොකරයි
— බාර්ට් බර්ග්
3
Z- දර්ශකයට බාධා කරයි
— ripper234
5
heightපිටත divසිටින විට ක්‍රියා නොකරයි 100%. එවිට පමණක් ක්රියා කරයි position: absolute;.
— Arch Linux Tux
1
මම මුලින් මෙම විසඳුම වෙනත් තැනක සොයාගත්තෙමි, නමුත් මෙම -webkit-transformප්‍රභේදය ෆැන්ටම්ජස් තුළ ක්‍රියාත්මක කිරීමට අවශ්‍ය වූ ප්‍රභේදය සඳහන් කිරීම සඳහා මෙම විශේෂිත පිළිතුරට අමතර ප්‍රශංසාවක් ... පැය ගණනක් අරගලය අවසන් කළ නිසා ඔබට ස්තූතියි!
— drmrbrewer
2
මෙය හොඳම පිළිතුරයි. මෙය ඇදහිය නොහැකි තරම් සරල ය, කිසිවෙකු තවදුරටත් භාවිතා නොකරන IE9 තරම් back ත අතීතයේ පවතින සෑම කාර්යයකම අවම කාර්යයන් හා කාර්යයන් අවුල් කරයි. මේ මිනිහාට තවත් උඩු යටිකුරු කරන්න ඉඩ දෙන්න!
— නික් ස්ටීල්
137

සිරස් කේන්ද්‍රගත කිරීම සඳහා ඇත්ත වශයෙන්ම ඔබට div දෙකක් අවශ්‍ය වේ. අන්තර්ගතය අඩංගු අංශයට පළල සහ උස තිබිය යුතුය.

#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>
ස්නිපටය පුළුල් කරන්න

මෙන්න ප්රති .ලය

— වඩීම් ඔව්චින්නිකොව්
source
4
එය පැරණි උපක්‍රමයක් ... ඉහළ 50% සහ ඉහළ ආන්තිකය අභ්‍යන්තර
— බෙදීම
34
එය උපකල්පනය කරන්නේ ඔබට div සඳහා ස්ථාවර උස ඇති බවයි. div ට උස වෙනස් කළ හැකි විට වැඩ නොකරන්න.
— ඇන්ඩ්‍රේ ෆිගියිරෙඩෝ
124

දැන් නම්‍යශීලි විසඳුම නවීන බ්‍රව්සර් සඳහා ඉතා පහසු ක්‍රමයකි, එබැවින් මම මෙය ඔබ වෙනුවෙන් නිර්දේශ කරමි:

.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>
ස්නිපටය පුළුල් කරන්න

— සන්තෝෂ් ඛල්ස්
source
1
ඔබ සතුව තිබේ නම් navbar, ඔබට උස භාවිතා කර height: calc(100% - 55px)හෝ ඔබේ උස කුමක් වුවත් වෙනස් කළ හැකිය navbar.
— ඒඩ්‍රියන්
මට ශරීරයෙන් ආන්තික / පෑඩින් ඉවත් කිරීමටද සිදු විය
— බෙන්
සමඟ හොඳින් ක්රියා කරයි float. ස්තූතියි.
— අමීර් ඒ. ෂබානි
මෙය "නවතම පැරණි" ජංගම සෆාරි බ්‍රව්සර්වල අමුතු ලෙස හැසිරෙනු ඇති බව කරුණාවෙන් සලකන්න. උස වෙනුවට නිර්දේශිත භාවිතය .container පන්තියේ නම්‍ය-පදනමයි
— නව මැජික්
78

2020 සංස්කරණය කරන්න: ඔබට මෙය භාවිතා කරන්න IE8 වැනි පැරණි බ්‍රව්සර් සඳහා සහය දැක්වීමට අවශ්‍ය නම් (ඔබ එය කිරීම ප්‍රතික්ෂේප කළ යුතුය). එසේ නොවේ නම්, නම්‍ය පෙට්ටිය භාවිතා කරන්න.

මෙය මා සොයාගත් සරලම ක්‍රමය වන අතර මම එය නිතරම භාවිතා කරමි ( jsFiddle demo මෙහි )

මෙම ලිපිය සඳහා CSS උපක්‍රම වලින් ක්‍රිස් කොයියර්ට ස්තූතියි .

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 සමඟ ආරම්භ වේ.

— ආමෙල් ලාර්සියර්
source
පැරණි බ්‍රව්සර් සඳහා සහාය දීම ප්‍රතික්ෂේප කිරීම, මට විසඳුම නම්යශීලී පෙට්ටිය නොව ජාල පද්ධතියයි. කන්ටේනරයක මධ්‍ය අන්තර්ගතය මට තරමක් කරදරයක් වූ අතර, එය උසින් කුඩා වූ විට, අනුචලන තීරුව පෙන්වීමට අවශ්‍ය වූ අතර, කේන්ද්‍රීය අන්තර්ගතය අනෙක් සියලුම ක්‍රම සමඟ අනුචලන ප්‍රදේශය ලිහිල් කරයි. කන්ටේනරය තුළ මම දැන් භාවිතා කරන්නේ: {display: grid; align-items: මැද; This මෙය යමෙකුට උපකාරී වේ යැයි සිතමි.
— ටොමසොෆෙන්
64

බොහෝ පර්යේෂණ වලින් පසුව මම අවසාන විසඳුම සොයා ගතිමි. පාවෙන මූලද්රව්ය සඳහා පවා එය ක්රියා කරයි. මූලාශ්‍රය බලන්න 

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}
— ymakux
source
4
බහාලුම් මූලද්‍රව්‍යයට ව්‍යංග හෝ පැහැදිලි උස තිබිය යුතු බව ඔබට මතක නම් මෙය හොඳින් ක්‍රියාත්මක වේ; jsfiddle.net/14kt53un CSS වලට සාපේක්ෂව නවකයන්ට සුළු ගොචා .
— මාටින් ෂට්
6
සියලු පිළිතුරු අතුරින්, මෙය වඩාත්ම සරල ය! ඔබේ පිළිතුර අන් අය ද දකිනු ඇතැයි මම බලාපොරොත්තු වෙමි! ඔබට ස්තුතියි! මාර්ගය වන විට, 50%මා වෙනුවෙන් වැඩ කළා (නොවේ -50%)
— කෝඩීසි
එය ඇදහිය නොහැකි විය. පැය ගණනක් සෙවීමෙන් පසු, මෙය මා වෙනුවෙන් වැඩ කළේය. මට පරිවර්තන Y (50%) භාවිතා කිරීමට සිදුවිය. ඒ මන්දැයි මට විශ්වාසයි, නමුත් එය ක්‍රියාත්මක විය. මගේ නඩුවේදී, මවුපියන් නිර්මාණය කරන ලද්දේ AEM පෝරම එන්ජිම වන අතර, මට පාලනය කළ හැක්කේ ඇතැම් ළමා අංග පමණි.
— tarekahf
46

Flexbox විසඳුම

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

body {
  display: flex;
  align-items: center;
}
<div>This is centered vertically</div>
ස්නිපටය පුළුල් කරන්න

— රෙජී පිංකම්
source
4
සටහන justify-content: centerඅයිතම තිරස් අතට කේන්ද්‍රගත කරනු ඇත
— පීටර් බර්ග්
36

පිටුවක div එක කේන්ද්‍රගත කිරීම සඳහා, ෆෙඩල් සබැඳිය පරීක්ෂා කරන්න .

#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>
ස්නිපටය පුළුල් කරන්න

තවත් විකල්පයක් වන්නේ CSS 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>
ස්නිපටය පුළුල් කරන්න

— නර්ඩ්රොයිඩ්
source
3
RArmelLarcier එය වැරදිය. සාපේක්ෂ ඒකක යනු ප්‍රතිශත %, ems සහ rems ය. නිරපේක්ෂ හෝ ස්ථාවර අගයන් පික්සල් හෝ ලකුණු වේ. ඔබ සඳහන් කරන්නේ "එය ක්‍රියාත්මක වන්නේ ප්‍රකාශිත උසකින් පමණි" යන්නයි. කෙසේ වෙතත්, මෝස් විසින් විස්තර කරන ලද මෙම ක්‍රමයට උස අවශ්‍ය වුවද, ඔබ එය සාපේක්ෂ ඒකක වලින් ප්‍රකාශ කරන විට, ප්‍රතිශතය හොඳම වේ, කේන්ද්‍රීය ඩීඅයිවී තුළ කොපමණ අන්තර්ගතයක් තිබුණත්, එහි අන්තර්ගතයට සරිලන පරිදි ඩීඅයිවී සිරස් අතට පුළුල් වේ. මෙම ක්‍රමයේ සුන්දරත්වය එයයි. අනෙක් හොඳ දෙය නම් යමෙකුට තවමත් එම බ්‍රව්සර් සඳහා සහය දැක්වීමට අවශ්‍ය නම් මෙම ක්‍රමය IE8 / 9/10 තුළ ක්‍රියාත්මක වීමයි.
— රිකාඩෝ ෂියා
arricardozea මම මුරණ්ඩු ලෙස සෙල්ලම් කිරීමට අදහස් නොකරන නමුත් සිරස් අතට කේන්ද්‍රගතව සිටියදී සිරස් අතට පුළුල් වන බව පැවසීම වැරදිය. උත්සහ කරන්න. උස "ස්ථාවර" විය යුතු යැයි මම කියන විට එය නිවැරදි වචනය නොවන බව මම දනිමි. එය ඇත්ත වශයෙන්ම මවුපියන්ට සාපේක්ෂ ය. කෙසේ වෙතත්, ක්‍රිස් කෝයර්ගේ ක්‍රමය වඩාත් අර්ථවත් යැයි මම සිතමි, මගේ පිළිතුර බලන්න stackoverflow.com/a/21919578/1491212 එය IE8 සමඟ අනුකූල වන අතර නිශ්චිත මානයන් නොමැති මූලද්‍රව්‍යයක් මත ක්‍රියා කරයි.
— ආමෙල් ලාර්සියර්
1
RArmelLarcier මේ සියල්ල හොඳයි. වැරදි සහෝදරයා නොවේ. එය උත්සාහ කරන්න: codepen.io/shshaw/pen/gEiDt - හරිත කොටුවට ඡේද එකතු කරන්න;]. ඇත්ත වශයෙන්ම, එය ප්‍රත්‍යක්‍ෂය ඉටු කිරීම සඳහා නූතනයිසර් භාවිතා කරයි, නමුත් සියල්ලටම එය කළ හැකි ය. ඔබගේ පිළිතුර සහ CSS-Tricks.com පෝස්ට් එකද මම දුටුවෙමි, නමුත් එම ක්‍රමය මට සතුටක් ගෙන දෙන්නේ නැත, එය අමතර සලකුණු භාවිතා කරන අතර CSS ඉතා වාචිකය. මම හිතන්නේ හොඳම විසඳුම නම්යශීලී පෙට්ටිය හෝ transform: translate(-50%, -50%);තාක්ෂණය භාවිතා කිරීමයි . IE8 සඳහා මම එය ඉහළට / මැදට පෙලගැසී ඉදිරියට යන්නෙමි.
— රිකාඩෝ ෂියා
1
arricardozea හොඳයි ඔබ සම්බන්ධ කළ කේතපදය "display: table" ක්‍රමය සහ අමතර සලකුණු භාවිතා කිරීම නිසා මම පුදුම නොවෙමි. කෙසේ වෙතත්, ඔබගේ අවසාන වාක්‍යයට +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>
ස්නිපටය පුළුල් කරන්න

— වර්ෂා ධඩ්ගේ
source
2
ඇත්ත වශයෙන්ම තවමත් පහසුම එක :) කෙසේ වෙතත්, මට විලාසිතාවන් ශරීරය වෙනුවට පිටත කොටසකට සැකසීමට සිදු විය.
— baburao
22

අවාසනාවට - නමුත් පුදුමයට කරුණක් නොවේ - විසඳුම යමෙකු බලාපොරොත්තු වනවාට වඩා සංකීර්ණ ය. අවාසනාවකට මෙන්, ඔබට සිරස් අතට කේන්ද්‍රගත වීමට අවශ්‍ය ඩිවයිස් වටා අමතර බෙදීම් භාවිතා කිරීමට අවශ්‍ය වේ.

මොසිල්ලා, ඔපෙරා, සෆාරි වැනි ප්‍රමිති-අනුකූල බ්‍රව්සර් සඳහා, ඔබ පිටත කොටස වගුවක් ලෙස පෙන්විය යුතු අතර අභ්‍යන්තර කොටස වගු කොටුවක් ලෙස පෙන්විය යුතුය - එවිට සිරස් අතට කේන්ද්‍රගත කළ හැකිය. ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් සඳහා, ඔබ අභ්‍යන්තර බෙදීම නියත වශයෙන්ම පිටත කොට් within ාශය තුළ ස්ථානගත කර ඉහළින් 50% ක් ලෙස සඳහන් කළ යුතුය . පහත දැක්වෙන පිටු මෙම තාක්ෂණය හොඳින් පැහැදිලි කරන අතර කේත සාම්පල කිහිපයක්ද සපයයි:

ජාවාස්ක්‍රිප්ට් භාවිතයෙන් සිරස් කේන්ද්‍රගත කිරීමේ ක්‍රමවේදයක් ද ඇත. ජාවාස්ක්‍රිප්ට් සහ සීඑස්එස් සමඟ අන්තර්ගතය සිරස්ව පෙළගැස්වීම එය පෙන්නුම් කරයි.

— sids
source
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>
ස්නිපටය පුළුල් කරන්න

Flexbox සහාය: http://caniuse.com/flexbox

— නිර්භීත
source
Android <4.4 සහය නොදක්වයි align-items: center;!
— ඇන්ඩ්‍රේ ෆීඩ්ලර්
ඇත්ත වශයෙන්ම, එය පෙළගැස්වීමේ අයිතම සඳහා සහය දක්වයි: මැද; caniuse.com/#search=align-items
— t.mikael.d
table 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>
ස්නිපටය පුළුල් කරන්න

— මාර්වල්න්
source
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>
ස්නිපටය පුළුල් කරන්න

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

— ජෝන් ස්ලෙගර්ස්
source
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>
ස්නිපටය පුළුල් කරන්න

ආශ්‍රිත: රූපයක් කේන්ද්‍රගත කරන්න

— ඇන්ටිලොව්
source
10

මෙම ගැටලුව වෙත නැවත පැමිණීමට සිදු වූ විට මම නිතරම යන්නේ මෙයයි .

පැනීමට අකමැති අයට:

  1. මව් බහාලුම position:relativeහෝ ලෙස සඳහන් කරන්න position:absolute.
  2. ළමා බහාලුම්වල ස්ථාවර උස සඳහන් කරන්න.
  3. සකසන්න position:absoluteසහtop:50% මව් මැද දක්වා ඉහළ යාමට දරුවා රුවනයකි මත.
  4. ආන්තික-ඉහළට සකසන්න: -එහෙත් අයිතමය කපා හැරීම සඳහා ළමා බහාලුමේ උසින් අඩක් yy වේ.

කේතයේ මේ සඳහා උදාහරණයක්:

<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>
— නින්ක්ස්
source
9

CSS හි නම්‍ය දේපල භාවිතා කිරීම.

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

කේත ස්නිපටය පෙන්වන්න

පෙළ මධ්‍යස්ථානය පෙන්වන්න

කේත ස්නිපටය පෙන්වන්න

ප්‍රතිශතය (%) උස සහ පළල භාවිතා කිරීම.

කේත ස්නිපටය පෙන්වන්න

— දීපු රෙගුනාත්
source
8

මම මේ CSS එක ලියා ඇති අතර වැඩි විස්තර දැනගැනීම සඳහා කරුණාකර ඉදිරියට යන්න: සිරස් අතට පෙළගස්වන මෙම ලිපිය CSS පේළි 3 ක් සමඟ ඕනෑම දෙයක් .

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}
— සංජිබ් දෙබ්නාත්
source
1
CSS පරිණාමනය පෙළ හා මායිම්වල විකෘති වීමට හේතු විය හැක (ගණිතය භාගික පික්සෙල් වලින් ලැබෙන විට).
— නේතන් කේ
6

නවකයන් සඳහා කරුණාකර උත්සාහ කරන්න 

display: flex;
align-items: center;
justify-content: center;
— උස්මාන් අයි
source
1
කරුණාකර එක් Stack ඇබිත්ත මෙම CSS කේතය කරන ආකාරය සිරස් අතට ඇති ගැලපෙන div.
— මිථ්‍යාදෘෂ්ටික වඳුරා
මෙයද ක්‍රියාත්මක වේ <div style="display:flex"><div style="margin:auto">Inner</div></div>
— idrisadetunmbi
පෙළගැස්වීමේ අයිතම සහ අන්තර්ගතය සාධාරණීකරණය කිරීම පිළිබඳ මෙම අපූරු පැහැදිලි කිරීම මට හමු විය. කියවිය යුතුම
— උස්මාන් අයි
4

බිල්බාද්හි පිළිතුර ක්‍රියාත්මක වන්නේ කොට් of ාශයේ ස්ථාවර පළලකින් පමණි .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>
ස්නිපටය පුළුල් කරන්න

— රුවන්
source
සිත්ගන්නාසුළුයි! මම බොහෝ දුරට සමාන තාක්ෂණයක් භාවිතා කරමි! -> stackoverflow.com/questions/396145/…
— ජෝන් ස්ලෙගර්ස්
4

transformනවීන බ්‍රව්සර් සහ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් මත ප්‍රායෝගිකව ක්‍රියා කරන කේත පේළි තුන :

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

මෙම පිළිතුරේ පෙර සංස්කරණයේ කිසියම් අසම්පූර්ණ බවක් මා දුටු හෙයින් මම මෙම පිළිතුර එක් කරමි (සහ ස්ටක් පිටාර ගැලීම මට සරලව අදහස් දැක්වීමට ඉඩ නොදේ).

  1. වර්තමාන පිහිටීම ශරීරයේ තිබේ නම් සහ බහාලුම් බෙදීමක් නොමැති නම් 'පිහිටීම' සාපේක්ෂ මෝස්තරය අවුල් කරයි. කෙසේ වෙතත් 'ස්ථාවර' වැඩ කරන බවක් පෙනේ, නමුත් එය පැහැදිලිවම දර්ශනපත්‍රයේ මධ්‍යයේ අන්තර්ගතය නිවැරදි කරයි පිහිටීම: සාපේක්ෂ

  2. සමහර ආවරණ බෙදීම් කේන්ද්‍රගත කිරීම සඳහා මම මෙම මෝස්තරය භාවිතා කළ අතර මොසිල්ලාහි මෙම පරිණාමිත ඩිවයිස් තුළ ඇති සියලුම මූලද්‍රව්‍යවල පහළ මායිම් නැති වී ඇති බව මට පෙනී ගියේය. විදැහුම්කරණ ගැටලුවක් විය හැක. නමුත් ඔවුන්ගෙන් සමහරක් සඳහා අවම පෑඩින් එකතු කිරීම එය නිවැරදිව විදහා දක්වයි. ක්‍රෝම් සහ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් (පුදුමයට කරුණක් ලෙස) පෙට්ටි කිසිදු අවශ්‍යතාවයකින් තොරව විදහා දැක්වීය අභ්යන්තර පෑඩ් නොමැතිව මොසිල්ලා පෑඩින් සහිත මොසිල්ලා

— මැන්ඩර්කේ
source
3

පහත දැක්වෙන සබැඳිය මඟින් ඔබේ CSS හි පේළි 3 ක් සමඟ සරල ක්‍රමයක් ඉදිරිපත් කරයි:

CSS පේළි 3 ක් සමඟ ඕනෑම දෙයක් සිරස් ලෙස පෙළගස්වන්න .

ණය : සෙබස්තියන් එක්ස්ට්‍රෝම් .

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

— හිකාරෝ
source
3

බ්රවුසරයේ අනුකූලතාවයට පිළිතුරු නොදීම පමණක් නොව නව ජාලකය සහ එතරම් නව ෆ්ලෙක්ස්බොක්ස් විශේෂාංගය සඳහන් කිරීම.

ජාලකය

සිට: මොසිල්ලා - ජාලක ප්‍රලේඛනය - බෙදීම සිරස් අතට පෙළගස්වන්න

බ්‍රව්සර් සහාය: ජාලක බ්‍රව්සර් සහාය

CSS:

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

HTML:

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

Flexbox

බ්‍රව්සර් සහාය: ෆ්ලෙක්ස්බොක්ස් බ්‍රව්සර් සහාය

CSS:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
— ctekk
source
3

නම්‍යශීලි කොටුව භාවිතා නොකර සියලුම බ්‍රව්සර් සඳහා ස්ථිර විසඳුමක් යැයි මම සිතමි - "පෙළගැස්වීමේ අයිතම: මැද;" යනු සංදර්ශක එකතුවකි: වගුව සහ සිරස්-පෙළගැස්ම: මැද;.

CSS

.vertically-center
{
    display: table;

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

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

HTML

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

Emdemo: https://jsfiddle.net/6m640rpp/

— මාටින් වැන්ට්කේ
source
2

මම මෙය කළේ (පළල, උස, ආන්තික-ඉහළ සහ ආන්තික-වම ඒ අනුව වෙනස් කරන්න):

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

<div class="wrapper"> -- Content -- </div>
— නෙතුඩ්කි
source
එය හොඳ වන්නේ ඔබ කේන්ද්‍රගත වීමට උත්සාහ කරන DIV හි පළල / උස ඔබ දන්නේ නම් පමණි. ප්‍රශ්නය අසන්නේ මෙය නොවේ
— උදා
2

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

.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;
}
— මහේන්ද්‍ර ලියා
source
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>
ස්නිපටය පුළුල් කරන්න

— රුවන්
source
2

එය කරන්න div: ඔබේ පන්තිය එක් කරන්න :

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

පැහැදිලි කිරීමක් සඳහා මෙම ලිපිය කියවන්න . සටහන: Heightඅවශ්‍යයි.

— අන්ෂුල්
source
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>
ස්නිපටය පුළුල් කරන්න

— මෙල්චියා
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.