一般来说水平居中很方便,有挺多方法可以实现的,例如margin: 0 auto就可以解决问题了,但如果要水平+垂直居中就没那么方便了。下面简单说说最近接触到的三种方法吧 !
一、div的宽高不确定
(1)绝对定位+translate
效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.center{
background-color: bisque;
width: 30%; /*加入宽高是为了方便看效果*/
height: 40vh;
/*起居中作用*/
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="center"></div>
</body>
</html>