CSS居中,css文本截字，超出文本省略号显示

一、文本居中

1、横向居中

text-aline:center;

2、单行文本垂直居中

line-height:height;

3、多行文本垂直居中

盒子不设置高度，同时设置上下相同的padding；

.box{
width:400px;
font-size:20px;
line-height:40px;
padding:20px 0px;
}

二、块级元素居中：

1、横向居中
①已转块或块级：

margin:0 auto;

②绝对定位（宽度定值）

.box{
position:relative;
}
.box .son{
width:400px;
position:absolute;
left:50%;
margin-left:-200px;
}
③空间移动（宽度不定）

.box{
position:relative;
}
.box .son{
width:400px;
position:absolute;
left:50%;
transform:translateX(-50%);/空间移动，水平移动/
}

2、垂直居中

①不设置父盒子高度，同时设置上下相同的padding，前提是块级元素和父盒子宽度都固定

.box {
width: 400px;
/*
子盒子垂直居中
父盒子高度省略
设置相同的上下padding
*/
padding: 100px 0;
border: 1px solid #000;
}
.box .son {
width: 200px;
height: 50px;
background-color: lightblue;
margin: 0 auto;
}
②绝对定位（高度固定）

.box{
position:relative;
}
.box .son{
heighr:400px;
position:absolute;
top:50%;
margin-top:-200px;
}

③空间移动（高度不定）

.box{
position:relative;
}
.box .son{
height:400px;
position:absolute;
top:50%;
transform:translateY(-50%);/*空间移动，垂直移动 */
}

3、水平垂直居中

①宽高固定

.box{
position:relative;
}
.box .son{
width:400px;
height:400px;
position:absolute;
left:50%;
top:50%;
margin-top:-200px;
margin-left:-200px;
}

②宽高不固定

.box{
position:relative;
}
.box .son{
position:absolute;
left:50%;
top:50%;
transform:translateX(-50%);/空间移动，水平移动 /
transform:translateY(-50%); /空间移动，垂直移动/
}

---

一、单行文本截字
p {
text-overflow: ellipsis;/显示省略号代替裁剪的文本/
white-space: nowrap;/空白处理方式 不换行/
overflow: hidden;/溢出隐藏/
}
二、多行文本截字
p{
display:-webkit-box;/设置盒子为弹性盒容器/
-webkit-box-orient:vertical;/设置盒子内部排列方式为垂直排列/
-webkit-line-clamp:2;/显示两行/
text-overflow:ellipsis;/用省略号代替才建的文字/
overflow:hidden;/溢出隐藏/
/若为纯字母、数字，需要加上下面这句/
word-break:break-all;
}