div中内容文字垂直居中 文字不换行显示省略号

目录

div中文字垂直居中

2、文字不换行，文本溢出显示省略标志

div中文字垂直居中

1、行高法

文字的行高和容器的高度相同，

p { height:30px; line-height:30px; width:100px; overflow:hidden; }

2、内边距（padding）法

适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中

p { padding:20px 0; }

3、CSS3的transform来实现

.center-vertical{position: relative;top:50%;transform:translateY(-50%);}.center-horizontal{position: relative;left:50%;transform:translateX(-50%); }

4、水平居中简单

text-align: center;

2、文字不换行，文本溢出显示省略标志

overflow: hidden;text-overflow: ellipsis;white-space: nowrap;

有时不起作用，这个时候看下div的width属性，设置一下width属性。