css文字水平垂直居中怎么设置？下面本篇文章就来给大家介绍使用CSS设置文字水平居中和垂直居中的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

1、文字水平居中

在CSS中想要让文字水平居中，可以使用text-align:center;。

text-align是一个基本的属性，它会影响一个元素中的文本行互相间的对齐方式。值left、right和center会导致元素中的文本分别左对齐、右对齐和居中，想要使文本居中，直接使用center即可。

该属性设置文本和img标签等一些内联对象(或与之类似的元素)的居中。

示例：

.box {

width: 300px;

height: 200px;

background: palegoldenrod;

text-align:center;

}

效果图：

2、文字垂直居中

在CSS中想要让文字水平居中，可以使用line-height属性。

line-height 属性设置行间的距离(行高)。不允许使用负值。

该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

示例：

.box {

width: 300px;

height: 300px;

background: paleturquoise;

line-height:300px;

}

效果图：

更多CSS相关知识，可访问 CSS教程 ！！

css样式能够实现水平居中，那么css水平居中怎么设置呢？本篇文章将给大家来分享关于css设置水平居中的实现方法。

css中可以设置行内元素的水平居中和设置块级元素的水平居中，对于行内元素和块级元素不了解的同学可以参考一下css块级元素的定义是什么？css块级元素有哪些？和css行内元素有哪些？css块级元素和行内元素的区别这两篇文章，那我们下面就直接来看css这两种水平居中的设置方法。

首先我们来看一下css设置行内元素水平居中。

第一种：css行内元素水平居中：

语法：div{text-align:center} /*DIV内的行内元素均会水平居中*/

简单解释：为父元素设置中text-align:center样式。

详细解释：

1、文字在这里 让“文字”这两个字相对于label水平居中是毫无意义的，label是行内元素，他的宽度等于内容的宽度，也就是说“文字”这两个字，永远是水平居中的。

2、

文字

此时，让“文字”这两个字水平居中便有了意义，因为p是块级元素，他的宽度独占一行，而文字只占两个字符宽度，此时给p元素设置text-align:center;那么“文字”这两个字便在一行内水平居中了。

3、

有时候，为了前端设计的美观，需要把div+css设计的页面里的某些div层里的文字垂直居中，包括多行文字以及单行文字；方法有不少，设计蜂巢就为大家介绍几种CSS水平和垂直居中的方法。

一、水平居中1.1 文本水平居中

文本水平居中

div{text-align:center;}

1.2 元素水平居中

设置 margin:0 auto;，即可让元素居中

元素水平居中

div{margin:0 auto;}

二、垂直居中2.1 单行垂直居中

设置line-height与height的高度相同。

单行垂直居中

div{height:100px;line-height:100px;}

2.2 多行垂直居中

利用 position 和负边距，让元素的顶部与居中线对齐，再让元素上移 50% 的高度。

垂直居中

.parent{position:relative;}.child{position:absolute;top:50%;margin-top:-50px;/*元素自身高度的一半*/height:100px;}

2.3 行内元素垂直对齐

该方法适用于行内元素和单元格(table-cell)元素，常用于行内元素内IMG垂直对齐

图片相对于文字中间对齐

img{vertical-align : middle;}

三、水平&&垂直居中3.1单行文本水平&&垂直居中

单行文本水平&&垂直居中

div{height:100px;line-height:100px;text-align:center;}

3.2元素水平&&垂直居中

垂直居中

.parent{position:relative;}.child{position:absolute;left:50%;top:50%;margin-left:-50px;/*元素自身宽带的一半*/margin-top:-50px;/*元素自身高度的一半*/width:100px;height:100px;}

//或者

.parent{position:relative;}.child{position:absolute;top:50%;margin:-50px auto 0 auto;width:100px;height:100px;}