Cara simpel CSS layout vertical center

27 Feb 2020 - Last updated 7 Feb 2021
#tips
#html
#css

Dengan hadirnya fitur CSS Flexbox sangat dimudahkan untuk layout suatu blok elemen HTML tepat berada ditengah-tengah secara vertical maupun horizontal.

Berikut cara simple CSS centering layout.

<div class="container">

	<div class="box">

		Hello world 

	</div>

</div>

CSS flexbox:

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

.container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
  height: 20%;
  border: 1px solid silver;
  border-radius: 5px;
}

Silahkan disederhanakan lagi bentuk penulisan sintak CSSnys.

Demo

Sharing

Comment