div的居中

最新推荐文章于 2023-07-13 15:08:55 发布

qq_33386381

最新推荐文章于 2023-07-13 15:08:55 发布

阅读量429

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/qq_33386381/article/details/79817361

版权

html+css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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;

就可以实现

qq_33386381

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div的居中

div 居中在工作中经常用到居中的方法也有很多总结2种自己最常用的方法（均是不需要知道盒子的宽高）1 父盒子设置relative 子盒子设置 position: absolute; top: 50%; right: 50%; transform: translate(-50%,-50%); 改方法的缺点是不兼容版本的IE 在移动端使用时当父盒子的距离不是偶数时移动的距离不成整数此时字...
复制链接

扫一扫

专栏目录