CSS文本水平居中对齐
分类：实例代码
CSS文本水平居中对齐属于前端实例代码，有关更多实例代码大家可以查看。
问题比较简单，只要将文本所在对象的text-align属性值设置为center即可。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
div{
width:200px;
height:50px;
border:1px solid green;
text-align:center;
}
</style>
</head>
<body>
<div>前端教程网</div>
</body>
</html>
如果要同时设置文本垂直居中，只要将line-height值等于height值即可。
代码修改如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
div{
width:200px;
height:50px;
line-height:50px;
border:1px solid green;
text-align:center;
}
</style>
</head>
<body>
<div>前端教程网</div>
</body>
</html>
CSS文本水平居中对齐，这样的场景在实际项目中还是用的比较多的，关于CSS文本水平居中对齐就介绍到这了。