目录
1.前言
参考:https://www.cnblogs.com/xiaocaiyuxiaoniao/p/10407830.html上面这篇文章中记录了6中方法大家可自行参考。
2.解决方法(flex布局)
该方法主要是通过在div上添加下面三个css属性,这样div就实现了垂直水平居中。
.sxzyjv{
display: flex;
align-items: center;/* 垂直居中 */
justify-content: center;/*水平居中 */
}
下面我提上代码,大家自行查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/main-public.js"></script>
<style>
html,body{
padding: 0rem;
margin: 0rem;
}
.sxzyjv{
display: flex;
align-items: center;/* 垂直居中 */
justify-content: center;/*水平居中 */
}
.aaa{
width: 100%;
height: 5rem;
overflow:hidden ;
background-color: red;
}
.bbb{
width: 2rem;
height: 2rem;
background-color: green;
}
.bbb img{
width: 1rem;
height: 1rem;
}
</style>
</head>
<body>
<div class="aaa sxzyjv">
<div class="bbb sxzyjv">
</div>
</div>
</body>
</html>