CSS可以使用align-items属性让文字上下居中，将文字所在容器定义为flex容器，然后设置align-items:center;样式即可让文字上下居中。

css设置文字上下居中：

#main {

width: 220px;

height: 300px;

border: 1px solid black;

display: -webkit-flex; /* Safari */

-webkit-align-items: center; /* Safari 7.0+ */

display: flex;

align-items: center;

}

#main div {

-webkit-flex: 1; /* Safari 6.1+ */

flex: 1;

}

注意: Internet Explorer 10 及更早版本浏览器不支持 align-items 属性。

注意: Safari 7.0 及更新版本通过 -webkit-align-items 属性支持该属性。

效果如下：

align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

提示：使用每个弹性对象元素的 align-self 属性可重写 align-items 属性。

属性值为center：

元素位于容器的中心。

弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度)。

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

下面我们来看一下css设置表格居中对齐的方法：

我们可以为表格table标签设置margin:auto;样式使表格居中。

示例：

table,td,tr{

border: 1px solid red;

margin: auto;

}

效果如下：

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

属性值：auto 浏览器计算外边距。

length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。

% 规定基于父元素的宽度的百分比的外边距。

inherit 规定应该从父元素继承外边距。

css表格文字居中可以使用text-align属性来设置，对表格的table与td标签设置css样式为text-align:center;即可实现表格内文字居中。

css表格中的文字是如何居中的：

在开始我们先介绍个属性，就是这个属性才能使表格在css样式中居中起来。

text-align 属性规定元素中的文本的水平对齐方式。

该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。

属性值：left 把文本排列到左边。默认值：由浏览器决定。

right 把文本排列到右边。

center 把文本排列到中间。

justify 实现两端对齐文本效果。

inherit 规定应该从父元素继承 text-align 属性的值。

让我们进个完整的实例吧：

table,td{text-align:center;border-style:solid}

效果图：