div內的文本可以垂直和水平對齊

Question

我在<div>有一個<div>和一個<p> ，其中包含一些文本。

使用text-align:center屬性可以實現水平對齊，但我無法垂直text-align:center 。

我檢查了其他相關的解決方案，但它們特定於該特定問題，不適合任何div大小。

我需要一個可能適合任何不同尺寸的div的解決方案（在我的情況下，寬度和高度都是100％）。

這是我的小提琴

Answer 1

你可以在p上使用top: calc(50% - 1em)來垂直居中。

p {
    position: relative;
    top: calc(50% - 1em);
}

小提琴

---

多行文字解決方案：

想法是獲取文本的height ，將其除以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> 

Answer 2

以下CSS將起作用。

文本對齊中心垂直

CSS：

html,body{
    height:100%;
    width:100%;   
}

#dvTxt{
    background-color:lightblue;
    height:100%;
    width:100%;
    text-align: center;
    vertical-align: middle;
    display: table;
}

#span {
    display: table-cell;
    vertical-align: middle;
    line-height: normal;
}

HTML

<div id="dvTxt">
    <p id="span">This is my text. I want it to be centered vertically</span>
</div>

Answer 3

添加padding-top：50％到#dvTxt。 對於不同的內容，它不是完美的解決方案，但您會明白下一步該做什么。 對於現在的填充頂部：50％非常適合您的小提琴示例。

Answer 4

您可以使用

position: absolute

見DEMO

CSS：

html,body{
height:100%;
width:100%;  
}

#dvTxt{
background-color:lightblue;
height:100%;
width:100%;
position: relative;
}

p {
width: 100%;
text-align: center;
position: absolute;
top: 50%;
}

Answer 5

如果每個元素只有一行，那么更簡單的解決方案就是使用行高。

#dvTxt{
    background-color:lightblue;
    height:100%;
    width:100%;
    text-align: center;
    vertical-align: middle;
    line-height:8em;
}

http://jsfiddle.net/o3smkvk9/10/

Answer 6

您可以使用填充屬性將文本垂直居中

#dvTxt{
background-color:lightblue;
height:100%;
width:100%;
text-align: center;
padding:50% 0;

}