水平居中

不定宽度的居中一般添加display: table;margin: 0 auto;属性即可
我常用的还是:max-width:800px;margin: 0 auto;,这样写响应式的时候方便一点点,如果确定了宽度的话,就要多写几个@media

垂直居中

垂直居中比较难一些。

行内元素

通过vertical-align: middle实现CSS垂直居中是最简便的方法,但是元素的display必须是inline-block。

利用table

#parent {display: table;}
#child {
    display: table-cell;
    vertical-align: middle;
}

设定position

#parent{
    position: relative;
}
#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 35%;
    margin: auto;
}

通过JS锁定

var f=document.getElementById("f");
var w=f.offsetWidth;
var h=f.offsetHeight;
f.style.position="absolute";
f.style.left="50%";
f.style.top="50%";
f.style.marginLeft=-(w/2)+"px";
f.style.marginTop=-(h/2)+"px";

超出省略

.oe{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

有溢出的时候就会自动现实省略了,有display:inline的时候无效,这个很少用,用起来的时候老是忘记。