div垂直居中

時間  2019-11-17
標籤 div 垂直 居中 欄目 CSS 简体版
原文   原文鏈接

轉自：https://www.cnblogs.com/mihoutaoguniang/p/6124299.htmlcss

小果今天要實現這樣的效果:單純css樣式，實現body下子集的水平垂直居中。html

body內容：web

1
2
3
4
5
< body >
     < div  class="div1">
         < div  class="div2"></ div >
     </ div >
</ body >

效果：flex

經過一系列的嘗試，實現了四種方法，驚奇的發現，其中三個是用position：absolute實現的:(div大小肯定)spa

1.原理：position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style type= "text/css" >
　　html,body{
     height : 100% ;
     width : 100% ;
     background :  black ;
     }
　　.div 1 {
     height :  100px ;
     width :  100px ;
     position :  absolute ;
     top :  50% ;
     left :  50% ;
     margin-top :  -50px ;
     margin-left :  -50px ;
     background : pink;
     }
　　.div 2 {
     height :  10px ;
     width :  10px ;
     margin-top :  90px ;
     background : lightblue;
     }
</style>

2.原理：margin: auto;position: absolute;top: 0;right:0;bottom: 0;left: 0;orm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style type= "text/css" >
　　html,body{
　　　　 height : 100% ;
　　　　 width : 100% ;
　　　　 background :  black ;
　　　　}
　　.div 1 {
     height :  100px ;
     width :  100px ;
     margin :  auto ;
     position :  absolute ;
     top :  0 ;
     right : 0 ;
     bottom :  0 ;
     left :  0 ;
     background : pink;
     }
　　.div 2 {
     height :  10px ;
     width :  10px ;
     margin-top :  90px ;
     background : lightblue;
     }
</style>

3.原理：transform:translate(-100px,-100px);position: absolute;top: 50%;left: 50%;htm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style type= "text/css" >
　　html,body{
     height : 100% ;
     width : 100% ;
     background :  black ;
     }
　　.div 1 {
     height :  100px ;
     width :  100px ;
     margin :  auto ;
     position :  absolute ;
     top :  50% ;
     left :  50% ;
     background : pink;
     -webkit-transform:translate( -100px , -100px );
     transform:translate( -100px , -100px );
     }
　　.div 2 {
     height :  10px ;
     width :  10px ;
     margin-top :  90% ;
     background : lightblue;
     }
</style>

4.原理：display:flex;justify-content:center;align-items:center;blog

body是這樣子的：ci

1
2
3
4
< body >
     < div  class="div1"></ div >
     < div  class="div2"></ div >
</ body >

css：

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
<style type= "text/css" >
　　html,body{
     height : 100% ;
     width : 100% ;
     background :  black ;
     display : flex;
     justify- content :  center ;
     align-items:  center ;
     }
　　.div 1 {
     height :  100px ;
     width :  100px ;
     background : pink;  
     }
　　.div 2 {
     height :  10px ;
     width :  10px ;
     position :  absolute ;
     left :  50% ;
     top :  50% ;
     margin-top :  40px ;
     margin-left :  -50px ;
     background : lightblue;
     }
</style>

以上是div1的大小肯定的居中方法，那若是大小不知道呢？小果使用了paddingO(∩_∩)O

代碼君：（display: table-cell必不可少啊）

 body內容：

1
2
3
4
5
<body>
     <div class= "div1" >
         <div class= "div2" ></div>
     </div>
</body>

css內容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style type= "text/css" >
　　html,body{
     height : 100% ;
     width : 100% ;
     background :  black ;
     }
　　.div 1 {
     padding :  50px ;
     display :  table-cell ;
     position :  absolute ;
     top :  50% ;
     right : 50% ;
     bottom :  50% ;
     left :  50% ;
     background : pink;
     margin :  auto ;
     }
　　.div 2 {
     padding :  10px ;
     margin-top :  30px ;
     margin-left :  -50px ;
     background : lightblue;
     }
</style>

　然而，效果是這樣的：

好了，整理完畢。若是果果大軍們有什麼意見，或者更好的方法，歡迎交流，隨之奉陪哈，謝謝！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程