Ko'rinib turibdiki, markaziy element vertikal holda ekranga ulanmagan

Men sahifaning o'rtasida elementni markazga surishga harakat qilaman. Men uni juda yaxshi markazlashtira olaman, lekin men ko'rinadigan balandlik markazlashtirilgan elementdan kichikroq bo'lgunga qadar sahifani vertikal ravishda o'zgartirsam, element scrollbar holda vertikal holda ekrandan chiqadi. Bu erda ushbu savolning namunasini ko'rishingiz mumkin:

http://codepen.io/mse/pen/BWayXV

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
}

.outer {
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.inner {
  display: inline-block;
  width: 400px;
  height: 800px;
  background: grey;
}
<div class="outer">
  <div class="inner"></div>
</div>
</div> </div>

Shuni eslatib o'tmoqchimanki, vertikal markazlashtirishning bir nechta boshqa usullarini, shu jumladan flexboxni sinab ko'rganman va men shu masala bo'yicha ishlayapman. Ushbu muammoni vertikal markazlashtirish usuli bilan hal qilishning bir yo'li bormi, yoki bu masala kamida vertikal markazlashtiruvchi usul bormi?

0
Tushunmang, siz qanday natijaga erishmoqchisiz?
qo'shib qo'ydi muallif Sergey Denisov, manba
Tushunmang, siz qanday natijaga erishmoqchisiz?
qo'shib qo'ydi muallif Sergey Denisov, manba
Tashqi divingizga maksimal balandlikni berishi va kontent juda ko'p bo'lsa, ichki skanerni berishi mumkin: codepen.io/ Anon/qalam/dvyoKd
qo'shib qo'ydi muallif Pete, manba
Tashqi divingizga maksimal balandlikni berishi va kontent juda ko'p bo'lsa, ichki skanerni berishi mumkin: codepen.io/ Anon/qalam/dvyoKd
qo'shib qo'ydi muallif Pete, manba
Tashqi divingizga maksimal balandlikni berishi va kontent juda ko'p bo'lsa, ichki skanerni berishi mumkin: codepen.io/ Anon/qalam/dvyoKd
qo'shib qo'ydi muallif Pete, manba
Menga scrollbar (xrom)
qo'shib qo'ydi muallif Pete, manba
Menga scrollbar (xrom)
qo'shib qo'ydi muallif Pete, manba
Menga scrollbar (xrom)
qo'shib qo'ydi muallif Pete, manba
Tashqi ko'rinish elementi elementning balandligidan kichik bo'lsa, elementning yuqori qismini sahifaning yuqori qismida to'xtatish uchun qidiraman. Hozirgi paytda buni qilmaydi. O'tkazish paneli orqali ruxsatisiz yuqoriga qarab ekrandan harakat qiladi.
qo'shib qo'ydi muallif Matt, manba
Tashqi ko'rinish elementi elementning balandligidan kichik bo'lsa, elementning yuqori qismini sahifaning yuqori qismida to'xtatish uchun qidiraman. Hozirgi paytda buni qilmaydi. O'tkazish paneli orqali ruxsatisiz yuqoriga qarab ekrandan harakat qiladi.
qo'shib qo'ydi muallif Matt, manba
Tashqi ko'rinish elementi elementning balandligidan kichik bo'lsa, elementning yuqori qismini sahifaning yuqori qismida to'xtatish uchun qidiraman. Hozirgi paytda buni qilmaydi. O'tkazish paneli orqali ruxsatisiz yuqoriga qarab ekrandan harakat qiladi.
qo'shib qo'ydi muallif Matt, manba
Yep, hozirgacha eng yaxshi echimga o'xshaydi. Rahmat Pete!
qo'shib qo'ydi muallif Matt, manba
Yep, hozirgacha eng yaxshi echimga o'xshaydi. Rahmat Pete!
qo'shib qo'ydi muallif Matt, manba
Yep, hozirgacha eng yaxshi echimga o'xshaydi. Rahmat Pete!
qo'shib qo'ydi muallif Matt, manba
Men faqatgina pastga aylantirmoqchiman. Divning yuqori qismini yuqoriga siljitish imkoniyati bo'lmasdan uziladi. Codependa ko'rish juda qiyin, chunki ichki divda mazmun yo'q, lekin bu kesilmaydi.
qo'shib qo'ydi muallif Matt, manba
Men faqatgina pastga aylantirmoqchiman. Divning yuqori qismini yuqoriga siljitish imkoniyati bo'lmasdan uziladi. Codependa ko'rish juda qiyin, chunki ichki divda mazmun yo'q, lekin bu kesilmaydi.
qo'shib qo'ydi muallif Matt, manba
Men faqatgina pastga aylantirmoqchiman. Divning yuqori qismini yuqoriga siljitish imkoniyati bo'lmasdan uziladi. Codependa ko'rish juda qiyin, chunki ichki divda mazmun yo'q, lekin bu kesilmaydi.
qo'shib qo'ydi muallif Matt, manba

8 javoblar

Bu ishlashi kerak

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100vh;
}
.outer {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  width: 400px;
  height: 800px;
  background: grey;
}
<div class="outer">
        <div class="inner"></div>
</div>
</div> </div>
0
qo'shib qo'ydi
Bu faqat sahifaning yuqori qismiga mos keladigan ko'rinadi. Hech qanday vertikal markazlashuv yo'q. codepen.io/anon/pen/vxYOBJ
qo'shib qo'ydi muallif Matt, manba

Bu ishlashi kerak

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100vh;
}
.outer {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  width: 400px;
  height: 800px;
  background: grey;
}
<div class="outer">
        <div class="inner"></div>
</div>
</div> </div>
0
qo'shib qo'ydi
Bu faqat sahifaning yuqori qismiga mos keladigan ko'rinadi. Hech qanday vertikal markazlashuv yo'q. codepen.io/anon/pen/vxYOBJ
qo'shib qo'ydi muallif Matt, manba

Bu ishlashi kerak

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100vh;
}
.outer {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  width: 400px;
  height: 800px;
  background: grey;
}
<div class="outer">
        <div class="inner"></div>
</div>
</div> </div>
0
qo'shib qo'ydi
Bu faqat sahifaning yuqori qismiga mos keladigan ko'rinadi. Hech qanday vertikal markazlashuv yo'q. codepen.io/anon/pen/vxYOBJ
qo'shib qo'ydi muallif Matt, manba

Bu ishlashi kerak

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100vh;
}
.outer {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  width: 400px;
  height: 800px;
  background: grey;
}
<div class="outer">
        <div class="inner"></div>
</div>
</div> </div>
0
qo'shib qo'ydi
Bu faqat sahifaning yuqori qismiga mos keladigan ko'rinadi. Hech qanday vertikal markazlashuv yo'q. codepen.io/anon/pen/vxYOBJ
qo'shib qo'ydi muallif Matt, manba

Buni ko'ring

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
}

.outer {
  display:flex;
  justify-content:center;
  align-items:center;
}

.inner {
  background: #ccc;
  width: 400px;
  height: 600px
}
<div class="outer">
  <div class="inner"> I'm a block-level element centered vertically within my parent.</div>
</div>
</div> </div>

More info: https://css-tricks.com/centering-css-complete-guide/

CSS VH center generator: http://howtocenterincss.com/

0
qo'shib qo'ydi

Ichki elementingizning hajmini cheklashingiz mumkin. Agar o'lchami sobit px miqdori bilan aniqlansa, u ekran px qiymatidan kichikroq bo'lgunga qadar kaydırmaya boshlaydi. Ichki elementning balandligini o'zgartirish bilan o'qiysangiz, vh dan foydalanishingiz mumkin yoki kichikroq ekranlarda o'lchamlarni kamaytirish uchun @media so'rovlarini qo'llashingiz mumkin. Bu erda quyidagi misol mavjud:

.inner { height: 100vh; /* 100 view height percentage*/}

Note: The viewport-percentage lengths are relative to the size of the initial containing block and affected by the presence of scrollbars on the viewport.

0
qo'shib qo'ydi
Ushbu kod zarrachalari yoqilgan bo'lsa va ba'zi yordam berishi mumkin bo'lsa, agar qanday qilib izoh berilgan bo'lsa, u ancha yaxshilandi. va nima uchun bu muammoni hal qiladi. Keling, faqat hozirgina so'ragan odamga emas, balki kelajakdagi savollarga javob berayotganingizni unutmang! Iltimos, sharhingizni izohlash uchun tartibga soling va qanday cheklovlar va taxminlar qo'llanilishini ko'rsatib bering. Ayniqsa, standartning qaysi versiyasini vh birligini belgilab qo'yishi kerak.
qo'shib qo'ydi muallif Toby Speight, manba

Ichki elementingizning hajmini cheklashingiz mumkin. Agar o'lchami sobit px miqdori bilan aniqlansa, u ekran px qiymatidan kichikroq bo'lgunga qadar kaydırmaya boshlaydi. Ichki elementning balandligini o'zgartirish bilan o'qiysangiz, vh dan foydalanishingiz mumkin yoki kichikroq ekranlarda o'lchamlarni kamaytirish uchun @media so'rovlarini qo'llashingiz mumkin. Bu erda quyidagi misol mavjud:

.inner { height: 100vh; /* 100 view height percentage*/}

Note: The viewport-percentage lengths are relative to the size of the initial containing block and affected by the presence of scrollbars on the viewport.

0
qo'shib qo'ydi
Ushbu kod zarrachalari yoqilgan bo'lsa va ba'zi yordam berishi mumkin bo'lsa, agar qanday qilib izoh berilgan bo'lsa, u ancha yaxshilandi. va nima uchun bu muammoni hal qiladi. Keling, faqat hozirgina so'ragan odamga emas, balki kelajakdagi savollarga javob berayotganingizni unutmang! Iltimos, sharhingizni izohlash uchun tartibga soling va qanday cheklovlar va taxminlar qo'llanilishini ko'rsatib bering. Ayniqsa, standartning qaysi versiyasini vh birligini belgilab qo'yishi kerak.
qo'shib qo'ydi muallif Toby Speight, manba

Ichki elementingizning hajmini cheklashingiz mumkin. Agar o'lchami sobit px miqdori bilan aniqlansa, u ekran px qiymatidan kichikroq bo'lgunga qadar kaydırmaya boshlaydi. Ichki elementning balandligini o'zgartirish bilan o'qiysangiz, vh dan foydalanishingiz mumkin yoki kichikroq ekranlarda o'lchamlarni kamaytirish uchun @media so'rovlarini qo'llashingiz mumkin. Bu erda quyidagi misol mavjud:

.inner { height: 100vh; /* 100 view height percentage*/}

Note: The viewport-percentage lengths are relative to the size of the initial containing block and affected by the presence of scrollbars on the viewport.

0
qo'shib qo'ydi
Ushbu kod zarrachalari yoqilgan bo'lsa va ba'zi yordam berishi mumkin bo'lsa, agar qanday qilib izoh berilgan bo'lsa, u ancha yaxshilandi. va nima uchun bu muammoni hal qiladi. Keling, faqat hozirgina so'ragan odamga emas, balki kelajakdagi savollarga javob berayotganingizni unutmang! Iltimos, sharhingizni izohlash uchun tartibga soling va qanday cheklovlar va taxminlar qo'llanilishini ko'rsatib bering. Ayniqsa, standartning qaysi versiyasini vh birligini belgilab qo'yishi kerak.
qo'shib qo'ydi muallif Toby Speight, manba