垂直居中的几种方式 + css文本框文字溢出显示省略号

1 对于最最基础的单行文本，要想实现垂直方向居中，很简单的方法就是让文本的行高等于父级元素的高度。这个仅适用于让当行文本垂直居中的情况，多行文本就不适用了。 

father{

width: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%;

width: 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;

.titlecontent{

 display: block; 

width: 80%;

border:2px solid red;

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

}

来源：https://www.cnblogs.com/maibao666/p/11157250.html