1. flex 弹性布局
1.1 思路
- 父组件作为flex容器，设置垂直、水平居中
- 子组件设置宽高即可
1.2 代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.father {
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
background-color: pink;
}
.son {
width: 200px;
height: 200px;
background-color: skyblue;
}
style>
head>
<body>
<div class="father">
<div class="son">div>
div>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
1.3 效果
2. 绝对定位
2.1 思路
- 设置绝对定位
- 将上下左右都设置为0
- margin设置为auto
2.2 代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
style>
head>
<body>
<div>div>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
2.3 效果
