水平和垂直居中方法总结

小小潘不放弃

已于 2022-03-11 10:55:55 修改

阅读量315

点赞数

分类专栏： CSS进阶文章标签： css html flex 前端 web开发

于 2022-03-01 16:27:57 首次发布

本文链接：https://blog.csdn.net/qq_57220516/article/details/123206791

版权

CSS进阶专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细介绍了多种在HTML和CSS中实现元素水平和垂直居中的方法，包括文本居中、行内元素、块级元素、单行文本和多行文本的垂直居中，以及不同场景下的块元素垂直居中策略，如已知高度和未知高度的父元素情况。同时，还涵盖了使用Flexbox布局进行居中的简便方法。

摘要由CSDN通过智能技术生成

前面或多或少讲过一些水平垂直居中的方法，这里总结一下常用的几种。

水平居中

文本水平居中

多行水平居中意义不大，这里只讲单行文本。设置text-align：center即可。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>文本水平居中</title>
  <style type="text/css">
	div{
		width:300px;
		height:40px;
		background-color: #1E90FF;
		text-align:center;
	}
  </style>
 </head>
 <body>
	<div>单行文本水平居中</div>
 </body>
</html>

在这里插入图片描述

元素水平居中

行内元素水平居中

和单行文本水平居中方法一致。

块元素水平居中

方法一：将自身的margin-left和margin-right设置成auto；

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
	.father{
		width:300px;
		height:80px;
		background-color: yellowgreen;
	}
	.son{
		width:200px;
		height:70px;
		margin:0 auto;
		background-color:lightgoldenrodyellow;
		text-align:center;
	}
  </style>
 </head>
 <body>
	<div class="father">
		<div class="son">块元素水平居中</div>
	</div>
 </body>
</html>

方法二：将要水平居中的元素转化为行内元素或行内块元素,父元素将text-align设置成center。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
	.father{
		width:300px;
		height:80px;
		background-color: yellowgreen;
		text-align:center;
	}
	.son{
		width:200px;
		height:70px;
		background-color:lightgoldenrodyellow;
		display:inline-block;
	}
  </style>
 </head>
 <body>
	<div class="father">
		<div class="son">块元素水平居中</div>
	</div>
 </body>
</html>

方法三：利用flex布局：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
	.father{
		width:300px;
		height:100px;
		background-color: yellowgreen;
		display:flex;
		justify-content: center;
	}
	.son{
		background-color: antiquewhite;
		width:200px;
		height:60px;
	}
  </style>
 </head>
 <body>
	<div class="father">
		<div class="son">k块元素水平居中</div>
	</div>
	</div>
 </body>
</html>

三者方法的运行结果皆如下：
在这里插入图片描述

垂直居中

文本垂直居中

单行文本垂直居中

设置height和line-height相等即可。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
	.father{
		width:240px;
		height:80px;
		line-height: 80px;;
		background-color: yellowgreen;
	}
  </style>
 </head>
 <body>
	<div class="father">单行文本垂直居中</div>
	</div>
 </body>
</html>

在这里插入图片描述

多行文本垂直居中

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
	.father{
		width:120px;
		height:90px;
		background-color: yellowgreen;
		display:table-cell;
		vertical-align: middle;
	}
	.son{
		display:inline-block;
	}
  </style>
 </head>
 <body>
	<div class="father">
		<span class="son">多行文本垂直居中
		</span>
	</div>
	</div>
 </body>
</html>

在这里插入图片描述

元素垂直居中

块元素垂直居中

父元素已知高度

父元素{
position:relative;
}
子元素{
position:absolute;
top:50%;
left:50%;
margin-top:负子元素高度的一半;
margin-left:负子元素宽度的一半；
}
例子如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
	.father{
		position:relative;
		width:300px;
		height:100px;
		background-color: yellowgreen;	
	}
	.son{
		background-color: antiquewhite;
		width:200px;
		height:60px;
		position:absolute;
		top:50%;
		left:50%;
		margin-top:-30px;
		margin-left:-100px;
	}
  </style>
 </head>
 <body>
	<div class="father">
		<div class="son"></div>
	</div>
	</div>
 </body>
</html>

父元素未知高度

利用flex布局

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
	.father{
		width:300px;
		height:100px;
		background-color: yellowgreen;
		display:flex;
		align-items: center;
	}
	.son{
		background-color: antiquewhite;
		width:200px;
		height:60px;
	}
  </style>
 </head>
 <body>
	<div class="father">
		<div class="son"></div>
	</div>
	</div>
 </body>
</html>