css 文字居中的方法

水平垂直居中

当把 line-height 的高度设置和 height 高度一样就能使 文字垂直居中

margin:0 auto; 水平居中;

超出文字隐藏

overflow: hidden;/*内容超出后隐藏*/	
text-overflow: ellipsis;/* 超出内容显示为省略号*/
white-space: nowrap;/*文本不进行换行*/

垂直居中

   html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto; /*水平居中*/
            position: relative;
            top: 50%; /*偏移*/
            margin-top: -150px; 
        }

你可能感兴趣的:(css 文字居中的方法)