一、CSS實(shí)現(xiàn)
CSS中可以使用position + top + transform的方式實(shí)現(xiàn)文字垂直居中,具體代碼如下:
span {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
使用這種方式的前提是需要父級元素有一個(gè)確定的高度,并且該元素的position屬性不是static或者initial。
同時(shí),還可以使用display:flex和align-items:center的方式實(shí)現(xiàn)文字垂直居中,具體代碼如下:
div {
display: flex;
align-items: center;
justify-content: center;
}
span {
align-self: center;
}
這種方式的好處是不需要父級元素有一個(gè)確定的高度,可以隨著父級元素的高度自適應(yīng)調(diào)整。
二、表格實(shí)現(xiàn)
使用表格也可以實(shí)現(xiàn)文字垂直居中的效果,具體代碼如下:
文字
這種方式的好處是使用簡單,但是不夠靈活,需要占用一定的布局空間。
三、line-height實(shí)現(xiàn)
使用line-height實(shí)現(xiàn)文字垂直居中的效果也是一種常見的方法,具體代碼如下:
span {
display: inline-block;
line-height: 30px;
height: 30px;
}
需要注意的是,這種方式適用于單行的文字,如果需要多行文字的垂直居中,則需要使用其他方式。
四、JavaScript實(shí)現(xiàn)
JavaScript可以在頁面加載完成后計(jì)算出span元素和父級元素的差值,然后設(shè)置span元素的marginTop值為該差值的一半,具體代碼如下:
window.onload = function() {
var parent = document.getElementById('parent');
var child = document.getElementById('child');
var parentHeight = parent.clientHeight;
var childHeight = child.offsetHeight;
var marginTop = (parentHeight - childHeight) / 2;
child.style.marginTop = marginTop + 'px';
}
需要注意的是,這種方式需要在頁面加載完成后運(yùn)行腳本,而且只適用于父級元素有確定高度的情況。