首页 > 代码库 > CSS实现垂直居中的方法

CSS实现垂直居中的方法

2024-09-10 17:39:03   217人阅读

垂直居中是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>

技术分享

 

——————————————————————————————————————————————————————————————————————-——————

 

CSS实现垂直居中的方法


联系
我们