一种兼容性极好的水平垂直居中方案

一、这是一个兼容性极佳的垂直居中布局方式:
1. 兼容性好，可兼容到ie8
2. 居中元素宽高可以是固定值，也可以是百分比
3. 能够根据浏览器窗口变化进行自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin:0;
        }
        html,body{
            width: 100%;
            height:100%;
        }
        .box{
            width: 100%;
            height: 100%;
            background:#fff;
            position: relative;
        }
        .center{
            width: 20%;
            height:20%;
            position: absolute;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background:#ccc;
            border:1px solid red;
        }
    </style>
</head>
<body>
<div class="box">
    <p class="center">
        这是一个兼容性极佳的垂直居中布局方式:<br/>
        1.兼容性好，可兼容到ie8<br/>
        2.居中元素宽高可以是固定值，也可以是百分比<br/>
        3.能够根据浏览器窗口变化进行自适应
    </p>
</div>
</body>
</html>

二、样式省略号

css实现超出部分显示省略号
 /* 显示一行，省略号 */
 
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
 
/* 显示两行，省略号 */
 
 text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;