看看这些前端面试题,带你搞定高频知识点(一)
每天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> <div> 块状元素 </div> <div>不定高宽的块状元素</div> <span>行内元素</span>
flex布局:不仅支持块状元素,而且支持行内元素,对固定高宽与不固定高宽皆可使用。【