在网页设计的过程中，为了美化布局，可能需要将文本居中，如何将文本居中？ 本文介绍css如何设置文本的垂直居中。
首先，您应该知道在css中实现元素的水平居中很容易。 对于文本，只需将父元素设置为text-align: center，而对于块级元素(如div )，只需将left和right边距值设置为auto即可。 有些人会考虑css的vertical-align属性以实现元素的垂直居中，但这仅对具有valign特性的元素有效。 因此，接下来我们来看看css如何实现单一文本的垂直中央和多文本的垂直中央。
首先，让我们看一下css单行文本的垂直居中
对于单行文本，只需使文本的行高度(line-height )和区域高度(height )一致即可。
css单行文本的垂直居中实现代码：
HTML :
php中文网单行文本垂直中央CSS:#div1{ width: 300px； height: 100px； 边距： 50px自动； border : 1px固态红色； line-height: 100px； 将line-height设置为等于父元素的height */text-align : center； /*设置文本水平居中*/overflow :隐藏； /*确保内容不超过容器或发生自动换行*
css单行文本的垂直居中对齐方式如下：
接下来，让我们看一下多行文本的垂直居中
说明：多行文本垂直居中时，分为两种情况。 第一，父元素的高度不是恒定的，而是会根据内容而变化。 另一个是父元素的高度是固定的。
1、亲元素高度不固定
如果父级高度是固定的，则高度只能在内部文本中扩展。 因此，只要使padding-top和padding-bottom的值相等，就可以设置内部填充值，使文本看起来像垂直居中一样。
css多行文字垂直居中对齐码：
HTML :
php中文网多行文本垂直居中，php中文网多行文本垂直居中，php中文网多行文本垂直居中。 CSS:#div1{ width: 300px； 边距： 50px自动； border : 1px固态红色； 文本照明3360中心； /*设置文本水平居中*/padding: 50px 20px； }
css多行文字的垂直居中对齐方式如下：
2、亲元素高度一定
css的垂直对齐属性。 显示：表； 单击，可以在div中模拟table属性。 因此，父div的显示属性、显示：表； 然后，再添加一个div包含文本，并设置其display :表单元； 和垂直对齐： middle。
css多行文字垂直居中对齐码：
HTML :
php中文网固定高度多行文本垂直居中，php中文网固定高度多行文本垂直居中，php中文网固定高度多行文本垂直居中，php中文网固定高度多行文本垂直居中。 CSS:#outer{ width: 400px； height: 200px； 边距： 50px自动； border : 1px固态红色； 显示：表； } # middle { display : table-cell； vertical-align :中间； 文本照明3360中心； /*文本水平居中*/width:100%； }
css多行文字的垂直居中对齐方式如下：
这篇文章到此结束，实际上有其他方法，所以不介绍。 请关注php中文网。