站長(zhǎng)資訊網(wǎng)
每天10道題，100天后，搞定所有前端面試的高頻知識(shí)點(diǎn)，加油?。?！，在看文章的同時(shí)，希望不要直接看答案，先思考一下自己會(huì)不會(huì)，如果會(huì)，自己的答案是什么？想過(guò)之后再與答案比對(duì)，是不是會(huì)更好一點(diǎn)，當(dāng)然如果你有比我更好的答案，歡迎評(píng)論區(qū)留言，一起探討技術(shù)之美。
面試官：給定一個(gè)元素，如何實(shí)現(xiàn)水平垂直居中？
我：呃~，針對(duì)這個(gè)問(wèn)題，我想到了三種常見(jiàn)的方式：定位、flex和grid布局。整出代碼如下
定位：因?yàn)檫@個(gè)元素不確定是不是塊級(jí)元素 (塊級(jí)元素是否有寬高) 還是行內(nèi)元素，所以需要使用 transform 屬性來(lái)做負(fù)的 50%移動(dòng)（基于當(dāng)前元素寬高）。
<style> html,body{ margin: 0; padding: 0; height: 100%; position: relative; } .item{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> <body> <div class="item" style="width: 100px; height: 100px; background: #999;"> 塊狀元素 </div> <div class="item" style="color: red;">不定高寬的塊狀元素</div> <span class="item" style="color: green;">行內(nèi)元素</span> </body>
登錄后復(fù)制
flex布局：不僅支持塊狀元素，而且支持行內(nèi)元素，對(duì)固定高寬與不固定高寬皆可使用?！?/p>
