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

原创已于 2022-03-25 15:43:13 修改 · 2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

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

html+css 专栏收录该内容

5 篇文章

订阅专栏

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

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

文本垂直居中

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>

position 和 transform

	<style>
	.text { 
		width:500px;
	    height: 200px;
	    position: relative;
	    background-color: #fff673; 
	}
	.text p {
	    margin: 0;
	    position: absolute;
	    top: 50%;
	    transform: translate(0,-50%);
		-ms-transform: translate(0,-50%); /* IE 9 */
		-webkit-transform: translate(0,-50%); /* Safari and Chrome */
	}
	</style>
	-------
	<body>
		<p>下面这句话是垂直居中的</p>
		<div class="text">
			<p>选择黄昏爆裂，嘲笑日出的自顾圣洁，乏味光辉</p>
		</div>
		<p>下面这段话也是垂直居中的</p>
		<div class="text">
			<p>
		  	满眼星辰，眉间落雪。满天星月是你的温柔，片片雪花是你的泪水。不管怎样，你是人间烟火，更是人间值得。
			</p>
		</div>
	</body>

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 translate(50px，100px) 是从左边元素移动50个像素，并从顶部移动100像素。

Internet Explorer 10, Firefox, 和 Opera支持transform 属性.
Chrome 和 Safari 要求前缀 -webkit- 版本.
Internet Explorer 9 要求前缀 -ms- 版本.

display: flex;

	<style> 
	.text {
		width: 500px;
	    height: 200px;
	    display: flex;
	    align-items: center;
	    background-color: #fff673;
	}
	</style>
	-------
	<body>
		<p>单行文本处于 "div" 中</p>
		<div class="text">
			<div>选择黄昏爆裂，嘲笑日出的自顾圣洁，乏味光辉</div>
		</div>
		<p>单行文本 "p"</p>
		<div class="text">
			<p>选择黄昏爆裂，嘲笑日出的自顾圣洁，乏味光辉</p>
		</div>
		<p>单行文本处于 "span" 中</p>
		<div class="text">
			<span>选择黄昏爆裂，嘲笑日出的自顾圣洁，乏味光辉</span>
		</div>
		<p>多字文本 "p"</p>
		<div class="text">
			<p>
				满眼星辰，眉间落雪。满天星月是你的温柔，片片雪花是你的泪水。不管怎样，你是人间烟火，更是人间值得。
			</p>
		</div>
	</body>

display: flex; 设置弹性盒子
align-items 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

图片在盒子中垂直居中

padding

display: flex;

	<style> 
	.picture {
		width: 500px;
	    height: 400px;
	    display: flex;
	    align-items: center;
	    background-color: #fff673;
	}
	</style>
	-------
	<body>
		<div class="picture">
			<img src="https://static.runoob.com/images/demo/demo2.jpg" style="width:100%">
		</div>
	</body>

position 和 transform

	<style>
	.picture { 
		width:500px;
	    height: 400px;
	    position: relative;
	    background-color: #fff673; 
	}
	.picture img {
	    margin: 0;
	    position: absolute;
	    top: 50%;
	    transform: translate(0,-50%);
		-ms-transform: translate(0,-50%); /* IE 9 */
		-webkit-transform: translate(0,-50%); /* Safari and Chrome */
	}
	</style>
	-------
	<body>
		<div class="picture">
			<img src="https://static.runoob.com/images/demo/demo2.jpg" style="width:50%">
		</div>
	</body>