水平居中&垂直居中常用方法总结

最新推荐文章于 2023-01-04 17:15:30 发布

fengyinchao

最新推荐文章于 2023-01-04 17:15:30 发布

阅读量2.4k

点赞数 2

分类专栏： CSS专题

本文链接：https://blog.csdn.net/fengyinchao/article/details/50749653

版权

CSS专题专栏收录该内容

9 篇文章 0 订阅

订阅专栏

PS：本文是对本博客中转载的《垂直和水平居中方法小结》的删减及部分改动，均有实例展示

1 水平居中方法

1.1 文字的水平居中

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>水平居中</title>
	<style type="text/css">
		.box{
			background-color: lightgreen;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="box">
		<h1><h1>我要水平居中<h1></h1>
		<span><span>我要水平居中<span></span>
	</div>
</body>
</html>

效果：

实现方式：对父元素使用text-align:center;则父元素中的文字会水平居中，不管是被块元素还是内联元素修饰

1.2 定宽块的水平居中

这个较为简单，直接margin:0 auto;

1.3 不定宽块的水平居中

目的：要让.box下的.inner块水平居中

代码：

<div class="box">
		<div class="wrap">
			<div class="inner">
				<h1><h1>我要水平居中<h1></h1>
				<span><span>我要水平居中<span></span>
			</div>
		</div>
</div>

样式：

<span style="white-space:pre">		</span>.box{
			background-color: lightgreen;
			height:200px;
			width:400px;
		}
		.wrap{
		   float:left;
		   position:relative;
		   left:50%;
		}
		.inner{
		   position:relative;  /*为啥用absolute没用啊*/
		   left:-50%;
		   background: red;
		   width:300px;
		}

效果：

分析：在inner外围包了一层wrap，可见inner确实水平居中了，但inne里r的内容没有水平居中

2 垂直居中方法

2.1 单行文字的垂直居中

让line-height等于height即可

2.2 多行文字、子块元素、图片的垂直居中(父元素高度确定)

让父元素display:table-cell;vertical-align: middle;

代码：

<span style="white-space:pre">	</span><div class="box">
		垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中
		垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中
		垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中
	</div>

<span style="white-space:pre">	</span><div class="box">
		<div class="wrap">
			垂直居中居中垂直居中垂直居中垂直居中垂直居中垂直居中
		</div>
	</div>

样式：

<span style="white-space:pre">		</span>.box{
			display: table-cell;
			width:200px;
			height:200px;
			background: pink;
			vertical-align: middle;
		}
		.wrap{
		  width:100px;
		  background: purple;
		}

效果：

注：以上是针对父元素中子元素是单一的种类，若不是单一的，如子元素中既有图片也有文字，那么文字就不会垂直对齐了，此时需对图片或块设置verticle:middle;

2.3 父元素高度不确定时

只需将父元素的上下padding值设为一样就可让子元素看上去垂直居中

fengyinchao

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
水平居中&垂直居中常用方法总结

PS：本文是对本博客中转载的《垂直和水平居中方法小结》的删减及部分改动，均有实例展示1 水平居中方法1.1 文字的水平居中代码：水平居中 .box{ background-color: lightgreen; text-align: center; } 我要水平居中我要水平居中效果：实现方式：对父元素
复制链接

扫一扫