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;
就可以实现