div的居中

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_33386381/article/details/79817361

div 居中在工作中经常用到 居中的方法也有很多总结2种自己最常用的方法(均是不需要知道盒子的宽高)

1 父盒子设置relative 子盒子设置

  position: absolute;
top: 50%;
right: 50%;
transform: translate(-50%,-50%);
改方法的缺点是不兼容版本的IE 在移动端使用时当父盒子的距离不是偶数时移动的距离不成整数 此时字体会模糊

2 使用css3的flex布局  用在移动端

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css实现居中</title>
	<style>
		.father-box{
			width: 300px;
			height: 300px;
			background-color: red;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	</style>
</head>
<body>
	<div class="father-box">
		<div>
			
			我就是垂直的内容
		</div>

	</div>
</body>
</html>

display: flex;

justify-content: center;

align-items: center;

就可以实现

展开阅读全文

没有更多推荐了,返回首页