วิธี css จัดตำแหน่ง vertical auto

[M027]

Example HTML

Code: Select all

<div class="parent">
      <div class="children">I'm vertically centered!</div>
</div>

Example CSS

Code: Select all

.children{
	background: #ffdb4c;
	height: 300px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

จากโค้ดทั้ง 2 จะทำให้ div.children จัดอยู่กึ่งกลางของ .parent ในแนว vertical

credit : http://davidwalsh.name/css-vertical-center

[Wartenvy]

โค้ดพวกนี้ถ้าผมสนใจจะศึกษาต้องเริ่มจากจุดไหนครับ

[M027]

ไม่ทราบว่ามีพื้นฐานถึงขั้นไหนคับ หากยังไม่มีพื้นฐานแนะนำให้ศึกษา html กับ css ก่อนคับผม