一个div中的文本如何垂直水平居中对齐

Question

一个div中的文本如何垂直水平居中对齐

htmlcss

6

我有一个包含文本的 <p> 和一个嵌套在 div 中的 <div>。

使用 text-align:center 属性可以实现水平对齐，但我无法在垂直方向上居中它。

我查阅了其他相关解决方案，但它们都只适用于特定问题，并不适用于任何大小的 div。

我需要一个适用于任何尺寸变化的 div 的解决方案（在我的情况下，宽度和高度均为 100%）。

这是我的Fiddle。

- dasher121

以下是一些方法：https://dev59.com/dHrZa4cB1Zd3GeqP4psc#20764040 - Danield

您可以使用表格单元格，查看此演示。 - jbutler483

6个回答

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>

- Sridhar DD

1

你的代码片段重定向到问题链接。 - dasher121

1

您可以使用

position: absolute

看见演示

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%;
}

- kapantzak

1

如果每个元素只有一行，则更容易的解决方法是使用行高。

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

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

- Harsh

1

你可以使用padding属性来垂直居中文本，例如：

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

}

- Abhishek Yadav

1

将padding-top:50%添加到#dvTxt。对于不同的内容，这不是完美的解决方案，但您会知道接下来该怎么做。目前，padding-top:50%非常适合您的fiddle示例。

- Vipul Hadiya

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Weafs.py · Accepted Answer

您可以在 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>