前端常用样式整理（图片水平、垂直居中；文本超出省略；吸顶效果、翘边阴影、四周阴影、背景渐变色等）

本文链接：https://blog.youkuaiyun.com/weixin_44432813/article/details/106657745

本文介绍如何使用CSS实现图片在div容器内的水平、垂直居中，以及单行和多行文本超出时的省略显示方法。通过设置display属性、flex布局、text-overflow等，提供美观且实用的网页布局解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片水平、垂直居中

<div>
<img src="1.jpg" alt="haha">
</div>

1、将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。

<style type="text/css">
*{margin: 0;padding: 0;}
div{
width:150px;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
}
</style>

2、弹性布局（常用，推荐此方法）

<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
border:1px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 50px;
height: 50px;
}
</style>

单行文本超出省略

overflow: hidden;
text-overflow:ellipsis;//超出显示...
white-space: nowrap;//不换行

多行文本超出省略

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;//行数
overflow: hidden;//超出隐藏

吸顶效果

position: sticky;

阴影：

box-shadow: #f0f0f0 10rpx 0rpx 15rpx 5rpx;

uniapp写vue.js，在onLoad里面写方法，然后调methods里面的具体方法，这样一是不显的乱，而是遇到初始化数据等问题方便茶轴。

		onLoad(){
			this.indexbanner();//方法
		},
		
		methods:{
			// 具体方法
			indexbanner(){
				this.http.post('index.php/we/video/recvideo', {}).then(res => {
					const data = res.data；
				}).catch(err => {
					
				})
			},
	     }

先写到这里，之后碰到使用频率高的再记录吧。

补充：翘边阴影

box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

四周阴影

box-shadow: darkgrey 0rpx 0rpx 20rpx 5rpx;

背景渐变色

第一个参可选值为top，bottom，left，right；left就是从左到右，其他同理。

background-image: linear-gradient(left, #ffd696,#ffaf48);

php取消警告
error_reporting(0);