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教程