
Cara simpel CSS layout vertical center
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.
Comment
comments powered by Disqus