Question

你好我试图垂直对齐一些文字，但无法弄明白。我搜索谷歌，甚至我遇到的例子似乎没有工作，我不知道为什么。

这是我的代码：

<style type="text/css">
body {
    background-color: #9E5A5B;
}
body,td,th {
    font-size: 36px;
    color: #000000;
}
.block-of-text p {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

</style>


</head>

<body>
<section class="block-of-text">
  <p>
Text I want vertically and horizontally centered.</p>
</section>

jsFiddle http://jsfiddle.net/0xvart2t/

如果这是不可能的，我试图去做的方式也许有人可以给我一个更好的例子，说明如何完成我想要完成的事情。谢谢你的时间。

Answer 1

CSS技巧垂直对齐和元素的内部

margin-bottom: -99999px;
padding-bottom: 99999px;

要使元素水平居中，请使用margin:0 auto;或具体使用margin-left:auto;和margin-right:auto;

Answer 2

你可以这样做：

＆＃13;

<html>
<head>
<style type="text/css">
body {
    background-color: #9E5A5B;
}
body,td,th {
    font-size: 36px;
    color: #000000;
}
.div-style{
	width:500px;
    height:200px;
    position: absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px;
}
</style>
</head>
<body>
<div class="div-style">
  <p>Text I want vertically and horizontally centered.</p>
<div>
</body>
</html>

＆＃13;

Answer 3

演示 - http://jsfiddle.net/0xvart2t/

设置position:absolute代替position:relative .block-of-text p并删除默认浏览器样式

* {
  margin: 0;
  padding: 0;
}

＆＃13;

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #9E5A5B;
}
body {
  font-size: 36px;
  color: #000000;
}
.block-of-text {
  text-align: center;
}
.block-of-text p {
  position: absolute;
  ;
  top: 50%;
  width: 100%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

＆＃13;

<section class="block-of-text">
  <p>
    Text I want vertically and horizontally centered.</p>
</section>

＆＃13;

Answer 4

您可以使用两种不同的东西：

verical-align: vertical-align;

OR

line-height: 200%; (or something like that);

希望这有帮助！

如何使用css垂直和水平居中的文本

4 个答案: