html字使两个文本水平对齐,html – div内的文本,用于垂直和水平对齐

你可以在p上使用top：calc(50％ – 1em)来垂直居中.

p {

position: relative;

top: calc(50% - 1em);

}

想法是获取文本的高度,将其除以2并在页面加载或调整窗口大小时在calc(50％ – ****)中使用它.然后找到p标记的规则并修改top属性.

var p = document.getElementsByTagName('p')[0];

function doMath() {

var ss = document.styleSheets;

for (k = 0; k < ss.length; k++) {

var rules = ss[k];

for (l = 0; l < rules.cssRules.length; l++) {

var r = rules.cssRules[l];

if (r.selectorText == "p") {

r.style.top = 'calc(50% - ' + String(parseInt(getComputedStyle(p).height.slice(0,-2)) / 2) + 'px)'

}

}

}

}

doMath();

window.onresize = doMath;

html,body {

height: 100%;

width: 100%;

margin: 0 auto;

}

#dvTxt {

background-color: lightblue;

height: 100%;

width: 100%;

text-align: center;

vertical-align: middle;

}

p {

position: relative;

top: calc(50% - 7.5px);

}

This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered

vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want

it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is

my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically