CSS使元素水平垂直居中的方法

最新推荐文章于 2024-07-25 11:52:08 发布

h5css3_linhuai

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量511

点赞数

分类专栏： css 文章标签： html css 居中

本文链接：https://blog.csdn.net/h5css3_linhuai/article/details/72312544

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、使用绝对定位（position）和外边距（margin）

方法：（1）将父级（box）设置成相对定位（relative）；（2）将子级（content）设置成绝对定位（absolute）；（3）将子级（content）top、left设置成50%；（4）将子级（content）margin-left设置成 -（子级宽度的一半）；（5）将子（content）margin-top设置成 -（子级高度的一半）

<!DOCTYPE html>
<html>
<head>
	<title>元素居中方法一</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.box{
			width:400px;
			height: 300px;
			background: green;
			position: relative;
		}
		.content{
			width: 100px;
			height: 80px;
			background: blue;
			position: absolute;
			left: 50%;
			top:50%;
			margin-left: -50px;
			margin-top:-40px;
		}
	</style>
</head>
<body>
<div class="box">
	<div class="content"></div>
</div>
</body>
</html>

2、使用绝对定位（absolute）和外边距（margin:auto）

方法：（1）将父级（box）设置成相对定位（relative）；（2）将子级（content）设置成绝对定位（absolute）；（3）将子级（content）的top、right、bottom、left设置成0；（4）将子级（content）的margin设置成auto；

<!DOCTYPE html>
<html>
<head>
	<title>方法二</title>
	<style type="text/css">
		.box{
			width: 400px;
			height: 300px;
			position: relative;
			background: blue;
		}
		.content{
			width: 200px;
			height: 100px;
			position: absolute;
			margin: auto;
			left: 0;
			right: 0;
			top:0;
			bottom:0;
			background: green;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="content"></div>
	</div>
</body>
</html>

h5css3_linhuai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS使元素水平垂直居中的方法

1、使用绝对定位（position）和外边距（margin）适用范围：子级元素（content）宽高固定方法：（1）将父级（box）设置成相对定位（relative）；（2）将子级（content）设置成绝对定位（absolute）；（3）将子级（content）top、left设置成50%；（4）将子级（content）margin-left设置成 -（子级宽度
复制链接

扫一扫

专栏目录