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属性。