我有一个< div>和< p> div里面包含一些文字.
使用text-align：center属性可以实现水平对齐,但我无法垂直对齐.
我检查了其他相关的解决方案,但它们特定于该特定问题,不适合任何div大小.
我需要一个可能适合任何不同尺寸的div的解决方案(在我的情况下,宽度和高度都是100％).
这是我的Fiddle
解决方法
你可以在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);
}
<div id="dvTxt">
<p>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</p>
</div>
