垂直居中布局

2019-10-26 20:55:19 阅读：168 来源： 互联网

标签：居中布局 color 50% height 垂直 width background position

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 
 8 <style>
 9     *{
10         margin: 0;
11         padding: 0;
12     }
13     .main{
14         width:300px;
15         height:400px;
16         position: relative;
17         top:0;
18         left:0;
19         background-color: antiquewhite;
20     }
21     .center{
22         position: absolute;
23         width:100px;
24         height:100px;
25         top:50%;
26         left:50%;
27         background-color: red;
28         transform: translate(-50%,-50%);
29     }
30     
31 </style>
32 <body>
33 
34 
35 <div class="main">
36     <div class="center">
37     </div>
38 </div>
39 </body>
40 </html>

效果：

第二种：flex布局垂直居中

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         html,body {
 9             width: 100%;
10             height: 100%;
11             margin: 0;
12             padding: 0;
13         }
14         
15         .main{
16             position: absolute;
17             display: flex;
18             align-items:center;
19             justify-content: center;
20             width:500px;
21             height:600px;
22             background-color: orange;
23 
24         }
25         .content {
26             width:300px;
27             height:300px;
28             background-color: red;
29         }
30     </style>
31 </head>
32 <body>
33 <div class="main">
34     <div class="content"></div>
35 </div>
36 
37 </body>
38 </html>

效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .main{
        width:300px;
        height:400px;
        position: relative;
        top:0;
        left:0;
        background-color: antiquewhite;
    }
    .center{
        position: absolute;
        width:100px;
        height:100px;
        top:50%;
        left:50%;
        background-color: red;
        transform: translate(-50%,-50%);
    }
    
</style>
<body>


<div class="main">
    <div class="center">
    </div>
</div>
</body>
</html>

标签：居中,布局,color,50%,height,垂直,width,background,position
来源： https://www.cnblogs.com/yinhao-jack/p/11745436.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

垂直居中布局