Yêu Cầu: Ta có một thẻ DIV cha, bên trong có thẻ DIV con có chiều dài là 80x80 và thẻ DIV con này lun nằm ở chính giữa thẻ DIV cha, không quan tâm chiều dài rộng của thẻ DIV cha
1. Ta dùng display: flex vs margin: auto;
HTML
<div class="parent"> <div class="child"></div> </div>CSS
.parent { width: 300px; height: 300px; background: yellow; display: flex; } .child { background: red; width: 80px; height: 80px; margin: auto; }2. Dùng display: table-cell vs verticle-align: middle
HTML
<div class="parent"> <div class="child"></div> </div>CSS
.parent { width: 300px; height: 300px; background: yellow; display: table-cell; vertical-align: middle; } .child { background: red; width: 80px; height: 80px; margin: auto; }3. Dùng display: flex, justify-content: center vs align-items: center trong css
HTML
<div class="parent"> <div class="child"></div> </div>CSS
.parent { display: flex; background: yellow; width: 300px; height: 300px; justify-content: center; align-items: center; } .child { background: red; width: 80px; height: 80px; }4. Ta dùng table in html
HTML
<table> <tr> <td> <div class="child"></div> </td> </tr> </table>CSS
table { border: none; } td { background: yellow; width: 300px; height: 300px; /*vertical-align: center; default of td*/ } .child { width: 80px; height: 80px; background: red; margin: auto; }5. Ta dùng position: relative vs calc trong css
HTML
<div class="parent"> <div class="child"></div> </div>CSS
.parent { background: yellow; width: 300px; height: 300px; } .child { background: red; position: relative; width: 80px; height: 80px; margin: auto; top: calc(50% - 40px); }
No comments:
Post a Comment