div盒子水平居中的方法

最新推荐文章于 2024-05-07 00:23:08 发布

丰柏林

最新推荐文章于 2024-05-07 00:23:08 发布

阅读量2.9k

点赞数

分类专栏： js前端文章标签： div如何水平居中 css让div水平居中

本文链接：https://blog.csdn.net/qq_40647912/article/details/99292074

版权

js前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>盒子水平居中的方法</title>
	<style type="text/css">
		/*
			1.使用margin: 0 auto;
			2.使用margin左右边距
			3.先让盒子左右边缘和父盒子垂直的中心线重叠，然后再把盒子往回移动自身宽度的一半
			4.把盒子转换成行内块，然后使用text-align属性是盒子水平居中
		*/

		/*1*/
		/*.m1{
			width: 300px;
			height: 300px;
			border: 1px solid red;
			margin: 0 auto;
		}

		.m2{
			width: 200px;
			height: 200px;
			border: 1px solid blue;
			margin: 0 auto;
		}*/


		/*2 只是针对有具体宽度值的元素进行设定*/
		/*.m1{
			width: 300px;
			height: 300px;
			border: 1px solid red;
			
		}

		.m2{
			width: 200px;
			height: 200px;
			border: 1px solid blue;
			margin-left: 49px;
		}*/


		/*3*/
		/*.m1{
			width: 300px;
			height: 300px;
			border: 1px solid red;
			position: relative;
		}

		.m2{
			width: 200px;
			height: 200px;
			border: 1px solid blue;
			position: absolute;
			left: 150px;
			margin-left: -101px;
		}*/


		/*4*/
		.m1{
			width: 300px;
			height: 300px;
			border: 1px solid red;
			text-align: center;
		}

		.m2{
			width: 200px;
			height: 200px;
			border: 1px solid blue;
			display: inline-block;
		}
	</style>
</head>
<body>
		<div class="m1">
			<div class="m2"></div>
		</div>
</body>
</html>

丰柏林

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
div盒子水平居中的方法

<!DOCTYPE html><html><head> <title>盒子水平居中的方法</title> <style type="text/css"> /* 1.使用margin: 0 auto; 2.使用margin左右边距 3.先让盒子左右边缘和父盒子垂直的中心线重叠，然后再把盒子往回移动自...
复制链接

扫一扫