这篇文章给大家分享的是CSS让字体垂直居中的方法。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。
有一个自定义表格如下所示，当所返回数据改变时，文字都能自动居中
//html
//用两个div做容器
<el-col :span="3" class="col_row1">
<div class="grid-content1 ">
<div class="subject1">{{item.subject1}}</div>
</div>
</el-col>
//css
.grid-content1 {
// width: 3.125rem;
width: 100%;
height:3.75rem;
display: table;
}
.subject1 {
display: table-cell;
vertical-align: middle;
}
补充：下面接着看下css样式—字体垂直、水平居中
<div class="tt">啦啦啦</div>
.tt{
padding: 0px;
width:500px;
height:200px;
text-align:center;
background-color:#F69;
display: table-cell;
vertical-align:middle
}
一：基本概念
首先，依旧是概念。介绍一下行内元素和块级元素，这个很重要，因为有的属性只能用于块元素，而有的正好相反，在一定的情况下，它们也可以相互转换，比如用display来进行设置。
1.行内元素(又叫内联元素inline element):
(1) 不占据一整行，随内容而定，有以下特点：
(2) 不可以设置宽高，也不可以设置行高，其宽度随着内容增加，高度随字体大小而改变。
(3) 内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用。
(4) 也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用。
常用的内联元素有：a – 锚点，b – 粗体(不推荐)，br – 换行，em – 强调，font – 字体设定(不推荐)，i – 斜体，img – 图片，input – 输入框，label – 表格标签，
select – 项目选择，small – 小字体文本，span – 常用内联容器，定义文本内区块，strike – 中划线，strong – 粗体强调
1.块级元素block element:
(1) 总是在新行上开始，占据一整行;
(2) 高度，行高以及外边距和内边距都可控制;
(3) 宽度始终是与浏览器宽度一样，与内容无关;
(4) 它可以容纳内联元素和其他块元素。
常用的块级元素有：div -最常用的块级元素，dl – 和dt dd搭配使用的块级元素，form – 交互表单，h1 – 大标题，hr – 水平分隔线，ol – 排序表单，p – 段落，ul – 非排序
列表互相转换：使用display设置可以使得行内元素拥有块级元素的特性，反之也可以
二、现在开始说一下简单的几种基础的居中方式
1.块中文字水平居中：text-align 用于块级元素，作用在使用它的块元素中的文字或者图片上。使得它们在水平方向上居中。
这个属性只能作用于块元素(或者被CSS控制为块元素的内联元素，但是被控制为内联元素的块元素是不行的)。一句话来说，就是要拥有块元素的特点的那些元素。这个很好理解，居中，肯定是行居中，如果使用它的元素本身不拥有完整的在宽度上的独立空间，它当然没有能力让它内部的文字或者图片居中。
父元素的这个属性对它下面的子元素也起作用，比如一个div设置了text-align居中，则它内部的文字可以居中，它的子div内部的文字也可以居中。但是子元素中文字的居中，是在子div中居中，而不是对于父div居中。也就是，它里面所有的文字，都会相对于最靠近自己的一层div来实现居中。所以，这个属性不能用于div在父div中的整体居中。(不仅仅是div，所有的表现为块元素的元素)。
2 块元素自身水平居中(确定设置了宽度的块)：margin。这个肯定是接触CSS一开始就知道的了。
一般情况下，可以设置margin:0 auto;这会使这个块级元素在它的父级元素中居中，上下左右都会居中。
如果只要水平居中的话，就设置margin-left:auto;margin-right:auto;
3 块元素自身水平居中(不确定宽度的块)：
在其他的一些文章中，看到有不少方法来介绍不确定宽度的块的居中的。
其实简单点说，不需要这么麻烦。我们可以这样来理解，没有明确设定宽度的block，根据块级元素的性质，它默认是独占一行的，所以这个时候block本身就是浏览器窗口的宽度，就不必要来设置水平居中了。
若是此时对块中的内容进行居中的话：
如果块元素的子元素也为块元素，就对子元素使用margin auto一类的方式就好啦;
如果块级元素的子元素为行内元素，就用我们一开始介绍的text-align也就可以解决;
对于子元素为块元素的，也可以用display设置为inline然后再用text-align
关于CSS让字体垂直居中表格的方法就介绍到这，感兴趣的朋友可以参考，希望大家阅读完这篇文章能有所收获，想要了解更多大家可以关注群英网络其它的相关文章。
