麦子笔记
您现在的位置是: 个人博客

css水平垂直居中

简介div水平垂直居中...越来越懒了,很多东西都懒的写,就喜欢写些没营养的充数,我还在...

1.div水平垂直居中方法1:
<div class="box"></div>

<!--样式如下-->
<style type="text/css">
	.box{
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -150px;
		margin-top: -150px;
		width: 300px;
		height: 300px;
		background: cornsilk;
	}
</style>

2.不确定div宽高情况下的水平垂直居中方法:
<div class="box">水平垂直居中了</div>

<!--样式如下-->
<style type="text/css">
	.box{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	
</style>

3.子Div 相对于 父div 水平垂直居中

<!--box为父div-->
<div class="box">
	<div class="item"><!--item为子div--></div>
</div>

<!--样式如下-->
<style type="text/css">
	.box{
		width: 300px;
		height: 300px;
		background: cornsilk;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.box .item{
		width: 150px;
		height: 150px;
		background: cornflowerblue;
	}
</style>

结尾:我也不知道为什么写这个。。。


作者麦子 本文地址https://www.maizibiji.com/read/69.html

版权声明: 本文为原创文章,版权归 麦子笔记 所有,欢迎分享本文,转载请保留出处,谢谢!

文章评论
昵称*
邮箱*
评论列表