HTML元素的五大居中方法

分享几个我所了解的居中方法,欢迎大家来补充…
一、五大居中之定位居中

<style>
	//去除body的margin和padding值
	*{margin: 0;padding: 0;}
	
	//已知元素的宽高,给 #box 元素设置上下 margin 为 50px(50px可以为任何像素也可以不写,默认为 0) 左右auto自动居中,这样父元素 #box 在body里面就左右居中了,设置一个相对定位position:relative;给子元素定位做参照。
	//或给html,body设置宽高为100%,position:relative;相对定位,给#box元素设置position:absolute;绝对定位,left:0;right:0;top:0;bottom:0;margin:auto;(设置上下左右都为0,marign为auto(auto代表自动)),这样就可以实现 #box 水平和垂直都居中了
	#box{width:400px;height:400px;border:1px solid #000;margin:50px auto;position:relative;}
	
	//已知元素的宽高,给#box下面的.zi元素设置position:absolute;绝对定位,设置上下左右都为0,marign为auto(auto代表自动),这样就可以实现 #box 下面的 .zi 元素水平和垂直都居中了
  	#box .zi{width:100px;height:100px;background:#0f0;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;}
</style>

<body>
	//创建一个父元素div id名为box
	<div id="box">
	
	//在父元素里面创建一个子元素div class名为zi
		<div class="zi"></div>
	</div>
</body>

二、五大居中之定位 + 百分比 + margin值 居中

<style>
	//去除body的margin和padding值
	*{margin: 0;padding: 0;}
	
	//已知元素的宽高,给 #box 元素设置上下 margin 为 50px(50px可以为任何像素也可以不写,默认为 0) 左右auto自动居中,这样父元素 #box 在body里面就左右居中了,设置一个相对定位position:relative;给子元素定位做参照。
	//或给html,body设置宽高为100%,position:relative;相对定位,给#box元素设置position:absolute;绝对定位,left:50%;top:50%;margin:-200px  0  0  -200px;(设置左上为50%,marign为自身宽高负的一半(margin值不固定,根据自身的宽高来定)),这样就可以实现 #box 水平和垂直都居中了
	#box{width:400px;height:400px;border:1px solid #000;margin:50px auto;position:relative;}
	
	//已知元素的宽高,给#box下面的.zi元素设置position:absolute;绝对定位,left:50%;top:50%;margin:-50px  0  0  -50px;(设置左上为50%,marign为自身宽高负的一半(margin值不固定,根据自身的宽高来定)),这样就可以实现 #box 下面的 .zi 元素水平和垂直都居中了
	.zi{width:100px;height:100px;background:#0f0;position:absolute;left:50%;top:50%;margin:-50px 0 0 -50px;}
</style>
<body>
	//创建一个父元素div id名为box
	<div id="box">
	
	//在父元素里面创建一个子元素div class名为zi
		<div class="zi"></div>
	</div>
</body>

三、五大居中之定位 + 百分比 + transform:translate 居中

<style>
	//去除body的margin和padding值
	*{margin:0;padding: 0;}
	
	//已知元素的宽高,给 #box 元素设置上下 margin 为 50px(50px可以为任何像素也可以不写,默认为 0) 左右auto自动居中,这样父元素 #box 在body里面就左右居中了,设置一个相对定位position:relative;给子元素定位做参照。
	//或给html,body设置宽高为100%,position:relative;相对定位,给 #box 元素设置position:absolute;绝对定位,left:50%;top:50%;transform:translate(-50%,-50%);(设置左上为50%;transform:translate为自身宽高负的50%),这样就可以实现 #box 水平和垂直都居中了
	#box{width:400px;height:400px;border:1px solid #000;margin:50px auto;position:relative;}
	
	//已知元素的宽高,给#box下面的.zi元素设置position:absolute;绝对定位,left:50%;top:50%;transform:translate(-50%,-50%);(设置左上为50%;transform:translate为自身宽高负的50%),这样就可以实现 #box 下面的 .zi 元素水平和垂直都居中了.zi{width:100px;height:100px;background:#0f0;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
</style>
<body>
	//创建一个父元素div id名为box
	<div id="box">
	
	//在父元素里面创建一个子元素div class名为zi
		<div class="zi"></div>
	</div>
</body>

四、五大居中之弹性盒居中

	//justify-content:center;align-items:center:设置在父类容器上,作用在子元素上
<style>
	//去除body的margin和padding值
	*{margin:0;padding: 0;}
	
	//已知元素的宽高,给 #box 元素设置上下 margin 为 50px(50px可以为任何像素也可以不写,默认为 0) 左右auto自动居中,这样父元素 #box 在body里面就左右居中了。
	//或给html,body设置宽高为100%,display:flex;(开启弹性盒)justify-content:center;(左右水平居中)align-items:center(上下垂直居中),这样就可以实现 #box 水平和垂直都居中了
	#box{width:400px;height:400px;border:1px solid #000;margin:50px auto;display:flex;justify-content:center;align-items:center;}
	
	//已知元素的宽高,给#box元素设置display:flex;(开启弹性盒)justify-content:center;(左右水平居中)align-items:center(上下垂直居中),这样就可以实现 #box 下面的 .zi 元素水平和垂直都居中了。
	.zi{width:100px;height:100px;background:#0f0;}
</style>

<body>
	//创建一个父元素div id名为box
	<div id="box">
	
	//在父元素里面创建一个子元素div class名为zi
		<div class="zi"></div>
	</div>
</body>

五、五大居中之伪元素(行内块方法)居中

<style>
	//去除body的margin和padding值
	*{margin:0;padding: 0;}
	
	//已知元素的宽高,给 #box 元素设置上下 margin 为 50px(50px可以为任何像素也可以不写,默认为 0) 左右auto自动居中,这样父元素 #box 在body里面就左右居中了,设置 text-align:center,让 #box 的行内块属性的子元素左右(水平)居中。
	#box{width:400px;height:400px;border:1px solid #000;margin:50px auto;text-align:center;}
	
	//给 #box 设置一个行内块属性的伪元素,高度为 #box 的100%,vertical-align:middle(垂直居中)
	#box:after{content:"";display:inline-block;height:100%;vertical-align:middle;}
	
	//已知元素的宽高,设置属性为行内块,vertical-align:middle(垂直居中),因为父元素 #box 设置了 text-align:center,所以现在 #box 的子元素 .zi 在 #box 里面已经实现了水平垂直居中
	.zi{width:100px;height:100px;background:#0f0;display:inline-block;vertical-align:middle;}
</style>
</head>
<body>
	//创建一个父元素div id名为box
	//在父元素里面创建一个子元素div class 名为 zi ,如果换行会有 3px ~ 5px 间隙
	<div id="box"><div class="zi"></div></div>
</body>
  • 13
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值