垂直居中是CSS布局中十分常见的布局效果，在平时的工作中遇到的垂直居中布局大概分为以下的几类：
1，首先是单行文本居中，非常简单，只需要设置父级元素的高和行高相等，或者设置本身元素为内联块或者块元素，再设置高和行高相等就可以。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 .sp1{
8 height:100px;
9 line-height:100px;
10 border:1px solid red;
11 }
12 .sp2{
13 display:inline-block;
14 height:50px;
15 line-height:50px;
16 border:1px solid blue;
17 }
18 </style>
19 </head>
20 <body>
21 <div class="sp1"><span>我是单行文本，我需要垂直居中1</span></div>
22 <span class="sp2">我是单行文本，我需要垂直居中2</span>
23 </body>
24 </html>
效果如下：
------------------------------------------------------------------------------------------------------------------------------------------------------
2，第二种遇到比较多的就是多行文本和图片以及按钮，类似这种。
小白遇到这种图文处理就会无从下手，当初我对CSS一知半解，写类似的布局会用很多比较2的方法，绝对定位，相对定位，margin,padding基本都会被我用到，总算是稀里糊涂给糊弄过去了，下来查了查资料，发现此布局的写法简单的令人发指，在这里分享给前段路上的小白们，一起学习进步，人不怕笨，但一定要勤奋。
2，代码如下：
首先要给父元素设置宽高，然后设置display:table;意思是此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
然后在子元素设置display:table-cell;意思是此元素会作为一个表格单元格显示（类似 <td> 和 <th>）;
有了这些属性之后，给子元素设置垂直居中vertical-align:middle，大功告成。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7
8 </style>
9 </head>
10 <style>
11 *{
12 margin: 0;
13 padding: 0;
14 }
15 .box1{
16 width: 100%;
17 height: 180px;
18 font-family: "微软雅黑";
19 color: #ffffff;
20 background: black;
21 display: table;
22 }
23 .box2{
24 width: 140px;
25 text-align: center;
26 display: table-cell;
27 vertical-align: middle;
28 }
29 .box2 .img{
30 width: 100px;
31 height: 100px;
32 line-height: 100px;
33 display: inline-block;
34 background: rgb(255,209,97);
35 border-radius: 50%;
36 text-align: center;
37 color: #000000;
38 }
39 .box3{
40 display: table-cell;
41 vertical-align: middle;
42 }
43 .btn{
44 display: table-cell;
45 vertical-align: middle;
46 }
47 input{
48 width: 170px;
49 height: 60px;
50 font:bold 30px "微软雅黑";
51 background: rgb(255,209,97);
52 border: none;
53 border-radius: 4px;
54 }
55 </style>
56 <body>
57 <div class="box1">
58 <div class="box2">
59 <span class="img">我是图片</span>
60 </div>
61 <div class="box3">
62 <h1>商家入驻</h1>
63 <p>平台优势，成单量更有保证，销量与品牌双重提升</p>
64 </div>
65 <div class="btn">
66 <input type="button" value="立即入住"/>
67 </div>
68 </div>
69 </body>
70 </html>
——————————————————————————————————————————————————————————————————————-——————
时间： 2024-10-12 13:18:11