写代码的过程中要时刻注意细节。
常用css的开发人员都知道让单行文字水平居中用text-align:center。垂直方向居中有一个小技巧是让line-height=height,一般用到这个的时候我们的高度都是固定的px值。当高度为百分比的时候，line-height的百分比是相对于font-size的,所以你如果使用line-height居中的话,就必须使用绝对的px值。 当高度为百分比的时候，如何让文字垂直居中呢？我常用的有三种方法，介绍如下：
方法一:
增加一个父元素,给父元素设置display:table,给需要居中的元素设置vertical-align:middle;display:table-cell;
方法二:
给需要居中的元素加以下代码样式和
display:flex;
justify-content:center;
align-items:center; 方法三: 增加一个父元素，父元素高度是百分比，需要被居中的元素高度不要设置，并且设置position:relative/absolute; 然后js中获取到父元素的高度和需要垂直居中元素的高度，即 原生JS document.getElementById(“父元素ID”).clientHeight document.getElementById(“子元素ID”).clientHeight document.getElementById(‘子元素’).style.top = (父元素H - 子元素H) / 2 + “px”;
jQuery $(“#父元素id”).height(); $(“#子元素id”).height(); $(“#子元素id”).css(“top”, (父H - 子H) / 2 + “px”);
**三种方法在不同场景都有一定程度的问题,需根据实际情况确定！
***小技巧tips:
设置高度宽度百分比时,百分比时相对于父元素来确定,承接父元素的百分比,相对于浏览器屏幕大小时,必须给html,body设置显性百分比100%
