CSS水平居中的几种方法
- margin: 0 auto;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<link href="lianxi2.css" rel="stylesheet">
<style>
.fa{
width: 500px;
height: 500px;
background-color: #ccc;
}
.son{
width: 100px;
height: 100px;
background-color: #c60;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="fa">
<div class="son"></div>
</div>
</body>
</html>2.通过display:flex实现CSS水平居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<link href="lianxi2.css" rel="stylesheet">
<style>
.fa{
width: 500px;
height: 500px;
background-color: #ccc;
display: flex ;
flex-direction: column;
}
.son{
width: 100px;
height: 100px;
background-color: #c60;
margin: 0 auto;
align-self: center;
}
</style>
</head>
<body>
<div class="fa">
<div class="son"></div>
</div>
</body>
</html>3.通过position:absolute
4.