Div水平垂直居中的三种方法

最新推荐文章于 2024-03-21 14:40:47 发布

转载最新推荐文章于 2024-03-21 14:40:47 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Begin-Vic/p/6728393.html

本文介绍了三种使用CSS实现元素在父容器内水平垂直居中的方法。第一种利用table-cell属性，第二种采用绝对定位配合translate变换，第三种则通过Flexbox布局实现。每种方法都附带了详细的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

百度了很多种方法，很多是不起作用的。下面这些方法是我亲自试过的。希望对大家有帮助！

下面是一波代码水军。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>设置div水平垂直居中</title>
 6     <style>
 7         *{
 8             margin: 0px;
 9             padding: 0px;
10         }
11         /*方法一*/
12         #cell {
13             display: table-cell;
14             vertical-align: middle;
15             height: 400px;
16             width: 400px;
17             background: lightcoral;
18 
19         }
20         .content{
21             margin: 0 auto;
22             height: 200px;
23             width: 200px;
24             background: lightgreen;
25         }
26         /*方法二*/
27         .outer{
28             position: relative;
29             width: 500px;
30             height: 400px;
31             background: coral;
32         }
33         .inner{
34             position: absolute;
35             top:50%;
36             left: 50%;
37             -webkit-transform: translate(-50%, -50%);
38             transform: translate(-50%, -50%);
39             width: 200px;
40             height: 200px;
41             background: yellowgreen;
42         }
43         /*方法三*/
44         .middle-panel{
45             height:100px;
46             width:200px;
47             background: peru;
48         }
49         .parent-panel{
50             width: 400px;
51             height:300px;
52             background: paleturquoise;
53 
54             /**主要代码：
55             display: flex是前提
56             align-items设置垂直居中；
57             justify-content设置水平居中*/
58             display: flex;
59             align-items: center;
60             justify-content: center;
61         }
62 </style>
63 </head>
64 <body>
65 <!--方法一-->
66     <div id="cell">
67         <div class="content">Content goes here</div>
68     </div>
69 <!--方法二-->
70 <div class="outer">
71     <div class="inner"></div>
72 </div>
73 <!--方法三-->
74 <div class="parent-panel">
75     <div class="middle-panel">
76     </div>
77 </div>
78 </body>
79 </html>

转载于:https://www.cnblogs.com/Begin-Vic/p/6728393.html