[H5]标签中内容垂直居中

一、p元素内容垂直居中

1、p元素display = "table-cell"时内容垂直居中

p {
    background-color: #fe7fac;
    width: 120px;
    height: 80px;
    display: table-cell;
    vertical-align: middle;
}

    

2、p元素display = "inline-block"时内容垂直居中

var tempTimeView = document.createElement("div");
tempTimeView.style.backgroundColor = "white";
tempTimeView.style.width = "100%";
tempTimeView.style.height = "44px";
tempTimeView.style.position = "sticky";
tempTimeView.style.top = parseFloat(tempNav.style.height) + 10 + "px";
baseDiv.appendChild(tempTimeView);

var curDate = new Date();
var timeLab = document.createElement("p");
timeLab.innerText = curDate.getFullYear()+"年";
timeLab.style.backgroundColor = "red";
timeLab.style.width = "68px";
timeLab.style.height = "20px";
timeLab.style.textAlign = "right";
timeLab.style.display = "inline-block";
timeLab.style.verticalAlign = "middle";
timeLab.style.marginTop = (parseFloat(tempTimeView.style.height) - parseFloat(timeLab.style.height))/2.0 + "px";
tempTimeView.appendChild(timeLab);

二、div元素内容垂直居中

1、div中div垂直居中

div {
    background-color: #fe7fac;
    width: 120px;
    height: 40px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

2、div中文字垂直居中

var navTitle = document.createElement("div");
navTitle.style.backgroundColor = "red";
navTitle.innerText = "技术交底";
navTitle.style.lineHeight = "44px";
navTitle.style.textAlign = "center";
listNavView.appendChild(navTitle);

 

TO：
CSS总结div中的内容垂直居中的五种方法：https://www.cnblogs.com/moqiutao/p/4807792.html