文本或者图片在盒子中垂直居中

黑猫Sennyou

已于 2022-03-25 15:43:13 修改

阅读量2k

点赞数 2

分类专栏： html+css 文章标签： html css

于 2022-03-25 15:42:47 首次发布

本文链接：https://blog.csdn.net/csdn_491407692/article/details/123727205

版权

本文介绍了使用padding、line-height、position与transform方法实现文本和图片在盒子中的垂直居中效果。特别是利用CSS的transform属性通过translate()进行定位，以及在不同浏览器中对transform的支持情况。同时提到了display: flex布局方式及其对align-items属性的运用，为实现跨浏览器的垂直居中提供解决方案。

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

文本或者图片在盒子中垂直居中

文本垂直居中

padding

line-height

	<style>
	.text {
       
	    width: 500px;
	    height: 200px;
	    line-height: 200px;
	    background-color: #fff673;
	}
	.text p{
       
		line-height: 1.5;
		display: inline-block;
	}
	.text2 p {
       
	    line-height: 1.5;  /*行高；行间距*/
	    display: inline-block;  /*行内块元素*/
	    vertical-align: middle;  /*设置垂直对齐方式*/
	}
	</style>
	-------
	<body>
		<p>下面这句话是垂直居中的</p>
		<div class="text">
			<p>选择黄昏爆裂，嘲笑日出的自顾圣洁，乏味光辉</p>
		</div>
		<p>下面这段话也是垂直居中的</p>
		<div class="text text2">
			<p>
			满眼星辰，眉间落雪。满天星月是你的温柔，片片雪花是你的泪水。不管怎样，你是人间烟火，更是人间值得。
			</p>
		</div>
	</body</