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

【问题标题】：How to vertically and horizontally centerd text using css如何使用css垂直和水平居中文本
【发布时间】：2016-05-15 08:52:54
【问题描述】：

您好，我正在尝试垂直对齐一些文本，但无法弄清楚。我搜索了谷歌，甚至我遇到的示例似乎也不起作用，我不知道为什么。

这是我的代码：

<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/

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

【问题讨论】：

vertical alignment of elements in a div的可能重复
CSS Center text (Horizontal and Vertical) inside a DIV block的可能重复
要使用top: 50%;，您需要将元素的位置设置为“绝对”或“固定”

标签： html css dreamweaver vertical-alignment

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

你可以这样做：

<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>

【讨论】：

【解决方案3】：

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

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

* {
  margin: 0;
  padding: 0;
}

* {
  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%);
}

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

【讨论】：

好吧，我仍然不确定我做错了什么。你可以查看graymatterfc.us 的页面，也许可以告诉我我做错了什么。文本现在垂直居中，但仍不水平。

【解决方案4】：

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

verical-align: vertical-align;

或

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

希望这有帮助！

【讨论】：