前端开发常见问题精选(一)
一、如何在元素自身及其父级宽高不确定的情况下让元素水平和垂直方向上居中? 这个问题最常见的就是让文字在浏览器窗口中水平和垂直方向居中了,因为文字的宽度和高度均不确定,浏览器窗口的宽高我们也不知道,那这个问题该如何解决呢? 1、50%定位+translate居中法 html,body{ height: 100%;} .text{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);} 2、Flexbox居中法 html,body{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;} /*注意这里得写宽度属性*/ 3、Flexbox+margin居中法 html,body{ display: flex; width: 100%; height: 100%;} /*注意这里得写宽度属性*/ .text{ margin: auto;} 其实,关于CSS中的居中方法在我之前的纯CSS七大...