1.1 水平居中
1.1.1 行内元素 (父元素)text-align,(子元素)inline-block
.parent{text-align:center} .child{display:inline-block}
1.1.2 块状元素 使用margin:0 auto来实现
.parent{} .child{width:200px;margin:0 auto}
1.1.3 (子元素)display:table;margin:0 auto;
.child{display:table;margin:0 auto;}
1.1.4 决定定位实现 (父元素)position:relative,(子元素)absolute+left+transform(translateX(-50%))
.parent{position:relative;} .child{position:absolute;left:50%;transform:translate(-50%);}
1.1.5 flex+justify-content/margin
/*第一种方法*/
.parent{display:flex;justify-content:center;}
/*第二种方法*/
.parent{display:flex;}
.child{margin:0 auto;}
1.2 垂直居中
1.2.1 单行文本 设置line-height等于父元素高度
.child{ height:20px; line-height:20px}
1.2.2 行内块级元素 使用display:inline-block; vertical-align:middle;
.child{display:inline-block; vertical-align:middle}
.parent:after{display:inline-block; vertical-align:middle}
1.2.3 块级元素 使用vertical-align的时候,由于对齐的基线是用行高的基线作为标记,故需要设置line-height或设置display:table-cell;
/*第一种方法*/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二种方法*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}
1.2.4 使用绝对定位
.parent{position:relative;}
.child{positon:absolute;top:50%;transform:translate(0,-50%);}
1.2.5 使用flex实现方法 (父)flex + align-items
.parent{display:flex;align-items:center;}
1.3 水平垂直居中
1.3.1 元素高度固定
.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;width:固定;height:固定;margin-top:-0.5*高度;margin-left:-0.5*宽度;}
1.3.2 元素高度固定
.parent{position:relative;}
.child{position:absolute;width:固定;height:固定;top:0;left:0;right:0;bottom:0;margin:auto}
1.3.3 (父)text-align + table-cell + vertical-align,(子)inline-block(兼容性方案)
.parent{display:table-cell;vertical-align:middle;text-align:center;}
.child{display:inline-block;}
1.3.4 使用绝对定位
.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
1.3.5 利用flex实现
.parent{display:flex;justify-content:center;align-items:center;}
1.3.6 利用定位实现
.parent{position:relative;}
.child{position:absolute;top:0;left:0;bottom:0;right:0;margin:0 auto;}
1.4 清除浮动
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
1.5 显示省略号…
1.5.1 单行显示
.ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
cursor: pointer;
}
1.5.2 多行显示
.ellipsis_clamp2 {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
1.6 加载中图标
.iconLoading {
animation:loading 1s linear infinite;
}
@keyframes loading {
from {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
to {
transform: rotate(360deg);
}
}