每天10道題,100天后,搞定所有前端面試的高頻知識點,加油?。。?,在看文章的同時,希望不要直接看答案,先思考一下自己會不會,如果會,自己的答案是什么?想過之后再與答案比對,是不是會更好一點,當然如果你有比我更好的答案,歡迎評論區(qū)留言,一起探討技術(shù)之美。
面試官:給定一個元素,如何實現(xiàn)水平垂直居中?
我:呃~,針對這個問題,我想到了三種常見的方式:定位、flex和grid布局。整出代碼如下
定位:因為這個元素不確定是不是塊級元素 (塊級元素是否有寬高) 還是行內(nèi)元素,所以需要使用 transform 屬性來做負的 50%移動(基于當前元素寬高)。
<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>
登錄后復制
flex布局:不僅支持塊狀元素,而且支持行內(nèi)元素,對固定高寬與不固定高寬皆可使用?!?/p>