废话不多说,代码和图片如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>如何居中一个div?</title>
<link rel="stylesheet" href="">
<script src=""></script>
<style>
/* 第一种弹性布局 */
.div {
width: 200px;
height: 200px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc;
}
.div .div1 {
width: 100px;
height: 100px;
background-color: rgb(237, 100, 100);
}
/* 第二种 */
.div2 {
position: relative;
width: 100px;
height: 100px;
background-color: rgba(236, 14