常用css属性组记录

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/setlilei/article/details/99751015

css 不换行 多余文字显示三个点 只对display为inline的元素生效

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

元素内部溢出显示滑动条

/* 元素必须设置高度生效 */
height: 100%;
overflow-y: scroll;

元素设置水平垂直居中

/* 水平居中 直接设置元素的margin: 0 auto */

/* 垂直居中 如下 */
width: 300px;
height: 300px;
position: relative;
top: 50%; /* 偏移 */

/* 向上平移两种方法 如下 */
/* 高度的一半 */
margin-top: -150px;

/* 使div向上平移(translate)自身高度的50% */
transform: translateY(-50%);

使用css3弹性布局flex实现垂直居中

display: flex;
align-items: center; /* 定义body的元素垂直居中 */
justify-content: center; /* 定义body的里的元素水平居中 */

设置图片为背景 图片不自动拉伸保持最清晰后居中

background: url(/image/test.png) center;
background-repeat: no-repeat;
background-size: auto 100%;
-moz-background-size: 100% 100%;

---

两个div都设为display: inline-block;可能出现两个div顶端不对齐 可在右侧div设置vertical-align: top;

.left {
	display: inline-block;
}
.right {
	display: inline-block;
	vertical-align: top; /* 与左侧div顶部对齐 */
}

持续更新。。。

元素设置水平垂直居中参考 https://www.cnblogs.com/yugege/p/5246652.html