水平居中、垂直居中
程序员文章站
2022-06-14 12:49:57
...
代码如下：就是div的大小必须写死
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.centerH{position: absolute;left:0;right:0;margin:auto;}
.centerV{position: absolute;top:0;bottom:0;margin:auto;}
.centerHV{position: absolute;top:0;bottom:0;left:0;right:0;margin:auto;}
</style>
</head>
<body>
<div class="centerHV" style="width: 100px; height: 100px; background-color: red;">水平垂直居中</div>
<div class="centerH" style="width: 100px; height: 100px; background-color: red;">水平居中</div>
<div class="centerV" style="width: 100px; height: 100px; background-color: red;">垂直居中</div>
</body>
</html>
效果如图，是响应式的：
居中对齐的另一种方式：
float: none;
display: block;
margin-left: auto;
margin-right: auto;