1 对于最最基础的单行文本，要想实现垂直方向居中，很简单的方法就是让文本的行高等于父级元素的高度。这个仅适用于让当行文本垂直居中的情况，多行文本就不适用了。
father{
500px;
height:500px
}
child{
line-height:500px;
}
2 如果是图片的话，直接设置img的属性vertical-align: middle;前提是需要设置父级元素为块级元素并且设置高度。
3 用absolute绝对定位，分别父级元素和子元素的position为
HTML：
<div class="out">
<div class="in">
节点内容节点内容
</div>
</div>
.out {position: relative;}
.in {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
50%;
margin: -15% 0 0 -25%;
}
这个只适玉元素本身有规定的高度和宽度，但是实际应用中是要根据内容才能确定高度，所以就有了升级版
4 用absolute定位，并且可不限制高度。很简单，借助强大的CSS3中的translate() 变形函数。具体原理是translate() 属性值的百分比是元素本身的宽高为基准进行计算的，直接把margin的移动换成translate() 实现，让元素相对自身往左往上移动自己宽和高的一半，正好剧中。代码如下：
.in {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
5 利用Flexbox布局
Flexbox 好像是专门为这类需求而生的一样。我们只需写两行代码轻松搞定：
第一是先给这个待居中元素的父元素设置 display:flex，第二是再给这个元素自身设置 margin:auto
这个方法的缺陷是并不是所有浏览器都支持，好消息是越来越多的浏览器已经支持了。
6.css文字溢出文本框显示省略号，
注意的点：1.一定要有宽度的块级 2.一定要设置溢出隐藏 3.一定不能拐弯 4.text-overflow:ellipsis;