站長資訊網
每天10道題，100天后，搞定所有前端面試的高頻知識點，加油！！！，在看文章的同時，希望不要直接看答案，先思考一下自己會不會，如果會，自己的答案是什么？想過之后再與答案比對，是不是會更好一點，當然如果你有比我更好的答案，歡迎評論區留言，一起探討技術之美。
面試官：給定一個元素，如何實現水平垂直居中？
我：呃~，針對這個問題，我想到了三種常見的方式：定位、flex和grid布局。整出代碼如下
定位：因為這個元素不確定是不是塊級元素 (塊級元素是否有寬高) 還是行內元素，所以需要使用 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;">行內元素</span> </body>
登錄后復制
flex布局：不僅支持塊狀元素，而且支持行內元素，對固定高寬與不固定高寬皆可使用。【
