如何使此文本居中？答案

【问题标题】：How to I center this text?如何使此文本居中？
【发布时间】：2015-07-13 08:44:37
【问题描述】：

所以我不知道如何将这段文字居中（我说的是“看看马修是谁”和“查看他的简历”等......我可以将它水平居中，但不能垂直居中。我在 div 中居中文本时总是很糟糕，所以任何帮助将不胜感激。谢谢！我的代码如下：

#nav {
padding:0px;
margin-top: 200px;
border-radius: 10px;
left: 0;
width: auto;
position: absolute;
height: auto;
background-image: url("http://www.diiiz.com/variant/Argent%C3%A9.jpg"); 
}

#nav li {
position: relative;
list-style: none;
width: auto;
border-top: 1px solid black;
}

#nav li span{
transition: all 1s;
position: absolute;
top: 0;
left: -300px;
display: block;
width: 300px;
height: 100%;
background-image: url("http://www.diiiz.com/variant/Argent%C3%A9.jpg"); 
z-index: -1;
border-radius: 10px;
color: white;
font-size: 20px;
text-align: center;
padding: 0px;
}

#nav li #spectab{
transition: all 1s;
position: absolute;
top: 0;
left: -300px;
display: block;
width: 175px;
height: 100%;
background-image: url("http://www.diiiz.com/variant/Argent%C3%A9.jpg"); 
z-index: -1;
border-radius: 10px;
color: white;
font-size: 20px;
text-align: center;
padding: 0px;
overflow: hidden;
}

#nav li #spectab2{
transition: all 1s;
position: absolute;
top: 0;
left: -300px;
display: block;
width: 130px;
height: 100%;
background-image: url("http://www.diiiz.com/variant/Argent%C3%A9.jpg"); 
z-index: -1;
border-radius: 10px;
color: white;
font-size: 20px;
text-align: center;
padding: 0px;
overflow: hidden;
}

#nav li #spectab:hover a{
background-color: black;
}

#nav li #spectab2:hover a {
background-color: black;
}

#nav li:hover span{
left: 200px;
}

#nav li:hover #spectab {
left: 125px;
}

#nav li:hover #spectab2 {
left: 315px;
}

#nav li a {
position: relative;
display: block;
text-decoration: none;
font-size: 15px;
font-weight: bold;
color: white;
text-align: center;
padding: 15px;
}

#nav li:hover {
background-color: black;
border-radius: 2px;
}

#nav li a:hover {
color: #778899;
display: block;
padding: 15px;
}

<!DOCTYPE html>
<html>
	<head>
		<title>Matthew</title>
		<link href="style2home.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>
		<ul id="nav">
			<li>
				<a href="web2home.html">HOME</a>
				<span>See who Matthew is</span>
			</li>
			<li>
				<a href="web2cv.html">CV</a>
				<span>View his current Curriculum Vitae</span> 
			</li>
			<li>
				<a href="#">RESEARCH</a>
				<span id="spectab"><a href="#">Current work</a></span>
				<span id="spectab2"><a href="#">Presentations</a></span
			</li>
			<li>
				<a href="web2con.html">CONTACT</a>
				<span>Send an email directly to Matthew</span>
			</li>
		</ul>
	</body>
</html>

【问题讨论】：

How to align text vertically center in div with CSS?的可能重复
请read 了解如何制作最少且清晰的示例。
在隐藏内容之前先正确设置基本样式。乍一看，您的示例看起来不错。必须通过交互来查看问题所在是一种痛苦。

标签： html css text centering

【解决方案1】：

您可以在要居中的元素的 css 中使用它：

.center{left:25%;width:50%;height:50%;top:25%;background:#f0f;position:absolute;text-align:center;}

显然是在调整百分比。

有关信息：请参阅此 SO：Centering Things

【讨论】：