Loading...
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
/* 第一种方案 子元素高度可以设定也可以不设定*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;
    display: flex;
    align-items: center;
    justify-content: center;
 
}
.app>div{
    width: 100px;
    height: 100px; 
    font-size: 20px;
    background: blueviolet;				
} 
/* 第二种方案 子元素高度可以设定也可以不设定*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;
    position: relative;
 
}
.app>div{
    width: 100px;
    height: 100px;
    font-size: 20px;
    background: blueviolet;	
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom:0;
    margin: auto;
} 
/* 第三种方案 子元素高度可以设定也可以不设定*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;
    position: relative;
 
}
.app>div{
    width: 100px;
    height: 100px;
    font-size: 20px;
    background: blueviolet;	
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
/* 第四种方案 高度就是文字加line-height的高度 局限性在于必须里边的元素是inline否则不生效*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;
    line-height: 500px;
    text-align: center;
 
}
.app>div{
    width: 100px;
    font-size: 20px;
    background: blueviolet;	
    display: inline;				
} 
/* 第五种方案 横向利用margin auto,垂直还是利用定位和平移 也不用管里边元素的高度*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;								
}
.app>div{
    width: 100px;
 
    font-size: 20px;
    background: blueviolet;	
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-left: auto;
    margin-right:auto ;
}
/* 第六种方案 最不推荐的方案  通过计算padding 一旦内部元素改变了高度或者宽度,那就惨了*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;
    box-sizing: border-box;
    padding-left: 200px;
    padding-top: 200px;											
}
.app>div{
    width: 100px;
    height: 100px;
    font-size: 20px;
    background: blueviolet;	
 
} 
/* 第七中方案 本人没用过,但是确实能实现 ,原来盒子的背景颜色被子元素覆盖了,
我又试着添加了元素。有点意思。有时间可以研究下 vertical-align我一直很拒绝。这个方法也是解决多行文字垂直居中*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;
    display: table;	
    text-align: center;
}
.app>div{
    width: 100px;
    height: 100px;
    font-size: 20px;
    background: blueviolet;	
    display: table-cell;
    vertical-align: middle;				
} 
/* 第八种方案 单行文本好居中 就是让文本的父元素的line-height和高度相同*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;		
    text-align: center;
    line-height: 500px;
}
.app>div{
    width: 100px;
    height: 100px;
    font-size: 20px;
    background: blueviolet;	
    display: inline;			
} 
/* 第九种方案 多行文本垂直居中 这里就不水平居中了。,。
除了歌词水平居中之外,其他这么的都不好看。
两种方法:table法和不设高度法,我自己起的名字
以下是table 法
。*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;		
    display: table;
}
.app>div{
    width: 100px;
    height: 100px;
    font-size: 20px;
    background: blueviolet;	
    display: table-cell;
    vertical-align: middle;
} 
/* 不设高度法,更简单 和其他的垂直居中一样,上代码就行 
这个时候就实现多行文本居中了 然后至于换不换行加不加点就直接操作了
还能操作显示几行等等
这种方法的多行可操作强,否则小心后期难维护
*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;
    display: flex;
    align-items: center;
    justify-content: center;
}
.app>div{
    width: 100px;
    font-size: 20px;
    background: blueviolet;	
    /* overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: pre-line; */
 
}
版权所有©转载必须以链接形式注明作者和原始出处:江湖源码 » 最全CSS3实现水平垂直居中的10种方案

: http://www.jhcms.net/index.php/2020/12/04/%e6%9c%80%e5%85%a8css3%e5%ae%9e%e7%8e%b0%e6%b0%b4%e5%b9%b3%e5%9e%82%e7%9b%b4%e5%b1%85%e4%b8%ad%e7%9a%8410%e7%a7%8d%e6%96%b9%e6%a1%88/

No comments yet.