一、如何实现品字布局
- 每块宽度相等但没有确定值,且不超过50%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>品字布局</title>
<style>
body { text-align: center; }
.div { width: 40%; height: 300px; line-height: 300px; background-color: aqua; border: solid 1px #666; }
.div1 { margin: 0 auto; }
.div2 { display: inline-block; }
.div3 { display: inline-block; }
</style>
</head>
<body>
<div class="div div1">1</div>
<div class="div div2">2</div>
<div class="div div3">3</div>
</body>
</html>
- 每块都有固定宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>品字布局</title>
<style>
.div { width: 100px; height: 100px; line-height: 100px; background-color: aqua; border: solid 1px #666; text-align: center; }
.div1 { margin: auto; }
.div2 { float: left; margin-left: 50%; position: relative; left: -100px; }
.div3 { float: left; position: relative; left: -100px;}
</style>
</head>
<body>
<div class="div div1">1</div>
<div class="div div2">2</div>
<div class="div div3">3</div>
</body>
</html>
- 满屏宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>品字布局</title>
<style>
.div { height: 300px; line-height: 300px; text-align: center; }
.div1 { width: 100%; margin: auto; background-color: red; }
.div2 { width: 50%; float: left; background-color: yellow; }
.div3 { width: 50%; float: right; background-color: blue; }
</style>
</head>
<body>
<div class="div div1">1</div>
<div class="div div2">2</div>
<div class="div div3">3</div>
</body>
</html>
二、如何实现垂直水平居中
- margin: auto
.outer {
position: relative;
width: 100%;
height: 500px;
background: red;
}
.inner {
background: blue;
width: 50%;
height: 50%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
- transform
.outer {
position: relative;
width: 100%;
height: 500px;
background: red;
}
.inner {
background: blue;
width: 50%;
height: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
- flex
.outer {
width: 100%;
height: 500px;
background: red;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
background: blue;
width: 50%;
height: 50%;
}
- table
.outer {
width: 700px;
height: 500px;
background: red;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.inner {
display: inline-block;
background: blue;
width: 400px;
height: 300px;
}
- grid
.outer {
background: red;
width: 700px;
height: 500px;
display: grid;
justify-content: center;
}
.inner {
background: blue;
width: 300px;
height: 50%;
align-self: center;
}