Skip to content

Commit 6aef761

Browse files
bjtqtibjtqti
committed
add layer
1 parent f8eba74 commit 6aef761

File tree

4 files changed

+100
-0
lines changed

4 files changed

+100
-0
lines changed

‎.DS_Store‎

2 KB
Binary file not shown.

‎center.html‎ renamed to ‎layer/center.html‎

File renamed without changes.

‎enter.html‎ renamed to ‎layer/enter.html‎

File renamed without changes.

‎layer/middle.html‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>未知宽高元素水平垂直居中</title>
6+
</head>
7+
<style>
8+
.wrap {
9+
position: absolute;
10+
width: 100%;
11+
height: 100%;
12+
text-align: center;
13+
background: #92b922;
14+
}
15+
.test {
16+
background: #de3168;
17+
display: inline-block;
18+
color: #fff;
19+
padding: 20px;
20+
}
21+
.wrap:after {
22+
display: inline-block;
23+
content: '';
24+
width: 0px;
25+
height: 100%;
26+
vertical-align: middle;
27+
}
28+
/* .vamb{
29+
display: inline-block;
30+
width: 0px;
31+
height: 100%;
32+
vertical-align: middle;
33+
} */
34+
35+
/**表格法**/
36+
.parent1{
37+
display: table;
38+
height:300px;
39+
width: 300px;
40+
background-color: #FD0C70;
41+
}
42+
.parent1 .child{
43+
display: table-cell;
44+
vertical-align: middle;
45+
text-align: center;
46+
color: #fff;
47+
font-size: 16px;
48+
}
49+
50+
/**transformd大法**/
51+
.parent3{
52+
position: relative;
53+
height:300px;
54+
width: 300px;
55+
background: #FD0C70;
56+
}
57+
.parent3 .child{
58+
position: absolute;
59+
top: 50%;
60+
left: 50%;
61+
color: #fff;
62+
transform: translate(-50%, -50%);
63+
}
64+
65+
66+
/**flex大法**/
67+
.parent4{
68+
display: flex;
69+
justify-content: center;
70+
align-items: center;
71+
width: 300px;
72+
height:300px;
73+
background: #FD0C70;
74+
}
75+
.parent4 .child{
76+
color:#fff;
77+
}
78+
79+
80+
81+
</style>
82+
<div class="wrap">
83+
<!-- <b class="vamb"></b> -->
84+
<div class="test">
85+
水平垂直居中了吧<br>
86+
两行文字哦
87+
</div>
88+
</div>
89+
90+
<!--表格法-->
91+
<div class="parent1">
92+
<div class="child">hello world-1</div>
93+
</div>
94+
<!--transform大法-->
95+
<div class="parent3">
96+
<div class="child">hello world</div>
97+
</div>
98+
99+
</html>
100+

0 commit comments

Comments
 (0)