HTML+css实现元素居中对齐的方法

最新推荐文章于 2024-07-26 14:27:06 发布

code_mo

最新推荐文章于 2024-07-26 14:27:06 发布

阅读量4.7k

点赞数 6

分类专栏：前端文章标签： HTML+css 居中对齐

本文链接：https://blog.csdn.net/weixin_43441790/article/details/97560123

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML+css实现元素居中对齐的方法

1.line-height实现居中对齐

此种方法只适用于单行文本的居中，需要知道父元素的高度，通过line-height的高度等于父元素的height高度就可以实现垂直居中。以下是单行居中的例子。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.main{
				width: 500px;
				height: 200px;
				background: skyblue;
			}
			.main p{
				text-align: center;/*文字水平居中*/
				line-height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<p>我水平方向和垂直方向都居中啦</p>
		</div>
	</body>
</html>

在这里插入图片描述
-------------------------------------------------------------------------------------------------------------------------------------------------分割线
一下的例子均可以对多行文字进行居中对齐；对齐的的对象不限于文，也可以是两个父子元素进行居中对齐；

4.使用absolute实行居中对齐

2.1absolute+margin实现

该方法需要知道父元素的宽和高，通过margin的的大小撑开一个距离从而实现居中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.main{
				position: relative;
				width: 500px;
				height: 200px;
				background: skyblue;
			}
			.main .box{
				position: absolute;
				width: 200px;
				height: 50px;
				left: 50%;
				top: 50%;
				margin-top: -25px;
				margin-left: -100px;
				background: gray;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="box">
				使用absolute+margin实现居中
			</div>
		</div>
	</body>
</html>

效果如下;
在这里插入图片描述

2.2通过absolute+transform实现

未知父元素的高度的情况下，通过给父元素position:relative，再给子元素position:absolute，通过translate即可定位到垂直居中的位置。translate(-50%,-50%)意思是相对自己向左边移动自身宽度一半的距离，向上相对自己向上移动自身高度一半的距离。
例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.main{
				position: relative;
				width: 500px;
				height: 200px;
				background: skyblue;
			}
			.main p{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
		<div class="main">
			<p>transform实现垂直居中</p>
		</div>
	</body>
</html>

在这里插入图片描述

3.通过display:table-cell实现居中对齐

给快级父元素加display:table;属性，使得父元素成为块级表格；
给子元素加display：table-cell；属性，子元素成为列表元素
在给子元素加vertical-align: middle;使表格内容居中显示，即可实现垂直居中的效果;
此种方法可以给一大段文字做居中对齐的排版，文字会根据父元素的宽度自动换行，并且不许知道父元素的宽和高。
例子如下;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.main{
				width: 500px;
				height: 200px;
				background: skyblue;
				display: table;
			}
			.main p{
				display: table-cell;
				vertical-align: middle;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<p>给父元素加display：table;给子元素加display：table-cell;给子元素加vertical-align:middle</p>
		</div>
	</body>
</html>

在这里插入图片描述

4.通过flex布局实现居中对齐

父元素使用flex布局,并定义两个属性值justify-content，align-items都为center，那么就定义为水平垂直居中
justify-content属性定义了项目在主轴上的对齐方式。align-items属性定义项目在交叉轴上如何对齐。
这种方法不需要知道父元素放的宽高。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.main{
				width: 500px;
				height: 200px;
				background: skyblue;
				display: flex;
				justify-content: center;  /*水平居中对齐*/
				align-items: center;  /*垂直居中对齐*/
			}
			.item{
				width: 200px;
				height: 30px;
				background: gray;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="item"></div>
		</div>
	</body>
</html>