div上下左右居中方法

方法一：在浏览器中只有一个div的情况

1 { position:fixed;
2     position:fixed;
3     left:0;
4     right:0;
5     top:0;
6     bottom:0;
7     margin:auto;
8 }

方法一

方法二：一个父元素div和一个已知宽度、高度的子元素div

1 /*假设子元素div的大小是200*300*/
2 {
3     position:absolute/fixed;
4     top:50%;
5     left:50%;
6     margin-left:-100px;
7     margin-top:-150px;
8 }

方法二

方法三：一个父元素div和一个位置宽度、高度的子元素div

 1 /*1、position布局*/
 2 {
 3     position:absolute;
 4     left:0;
 5     right:0;
 6     top:0;
 7     bottom:0;
 8     margin:auto;
 9 }
10 /*2、table布局*/
11 .father{
12     display:table;
13 }
14 .chield{
15     display:table-cell;
16     vertical-align:middle;
17 }
18 /*3、flex布局*/
19 .father{
20     display:flex;
21     flex-direction:row;
22     justify-content:center;
23     align-items:center;
24 }
25 .chield{
26     flex:1;
27 }
28 /*translate布局*/
29 {
30     position: absolute;
31     top: 50%;
32     left: 50%;
33     -webkit-transform: translate(-50%, -50%);
34     -moz-transform: translate(-50%, -50%);
35     -ms-transform: translate(-50%, -50%);
36     -o-transform: translate(-50%, -50%);
37     transform: translate(-50%, -50%);
38 }

方法三

posted @ 2018-08-23 15:16 Java小斌阅读(802) 评论(0) 收藏举报

刷新页面返回顶部