Cara simpel CSS layout vertical center
Dengan hadirnya fitur CSS Flexbox sangat dimudahkan untuk layout elemen HTML tepat berada ditengah-tengah center secara vertical maupun horizontal.
- Fauzan My
- 1 min read
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.
Lihat Demo
