Loading...
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
/* 第一种方案 子元素高度可以设定也可以不设定*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;
    display: flex;
    align-items: center;
    justify-content: center;
 
}
.app>div{
    width: 100px;
    height: 100px; 
    font-size: 20px;
    background: blueviolet;				
} 
/* 第二种方案 子元素高度可以设定也可以不设定*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;
    position: relative;
 
}
.app>div{
    width: 100px;
    height: 100px;
    font-size: 20px;
    background: blueviolet;	
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom:0;
    margin: auto;
} 
/* 第三种方案 子元素高度可以设定也可以不设定*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;
    position: relative;
 
}
.app>div{
    width: 100px;
    height: 100px;
    font-size: 20px;
    background: blueviolet;	
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
/* 第四种方案 高度就是文字加line-height的高度 局限性在于必须里边的元素是inline否则不生效*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;
    line-height: 500px;
    text-align: center;
 
}
.app>div{
    width: 100px;
    font-size: 20px;
    background: blueviolet;	
    display: inline;				
} 
/* 第五种方案 横向利用margin auto,垂直还是利用定位和平移 也不用管里边元素的高度*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;								
}
.app>div{
    width: 100px;
 
    font-size: 20px;
    background: blueviolet;	
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-left: auto;
    margin-right:auto ;
}
/* 第六种方案 最不推荐的方案  通过计算padding 一旦内部元素改变了高度或者宽度,那就惨了*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;
    box-sizing: border-box;
    padding-left: 200px;
    padding-top: 200px;											
}
.app>div{
    width: 100px;
    height: 100px;
    font-size: 20px;
    background: blueviolet;	
 
} 
/* 第七中方案 本人没用过,但是确实能实现 ,原来盒子的背景颜色被子元素覆盖了,
我又试着添加了元素。有点意思。有时间可以研究下 vertical-align我一直很拒绝。这个方法也是解决多行文字垂直居中*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;
    display: table;	
    text-align: center;
}
.app>div{
    width: 100px;
    height: 100px;
    font-size: 20px;
    background: blueviolet;	
    display: table-cell;
    vertical-align: middle;				
} 
/* 第八种方案 单行文本好居中 就是让文本的父元素的line-height和高度相同*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;		
    text-align: center;
    line-height: 500px;
}
.app>div{
    width: 100px;
    height: 100px;
    font-size: 20px;
    background: blueviolet;	
    display: inline;			
} 
/* 第九种方案 多行文本垂直居中 这里就不水平居中了。,。
除了歌词水平居中之外,其他这么的都不好看。
两种方法:table法和不设高度法,我自己起的名字
以下是table 法
。*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;		
    display: table;
}
.app>div{
    width: 100px;
    height: 100px;
    font-size: 20px;
    background: blueviolet;	
    display: table-cell;
    vertical-align: middle;
} 
/* 不设高度法,更简单 和其他的垂直居中一样,上代码就行 
这个时候就实现多行文本居中了 然后至于换不换行加不加点就直接操作了
还能操作显示几行等等
这种方法的多行可操作强,否则小心后期难维护
*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;
    display: flex;
    align-items: center;
    justify-content: center;
}
.app>div{
    width: 100px;
    font-size: 20px;
    background: blueviolet;	
    /* overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: pre-line; */
 
}
版权所有©转载必须以链接形式注明作者和原始出处:江湖源码 » 最全CSS3实现水平垂直居中的10种方案
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
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto; /*水平居中*/
            position: relative;
            top: 50%; /*偏移*/
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>
版权所有©转载必须以链接形式注明作者和原始出处:江湖源码 » CSS3实现垂直居中的方法

首先了解下,margin的auto属性的作用是用来分配剩余空间,所以对于有剩余空间的元素才有效哦(块及元素)。比如图片设置margin: 0 auto是无效的,因为图片是内联元素,不是占一整行,没有剩余空间。

1.块及元素水平方向居中:

原理:两侧auto,则平分剩余空间,相当于水平居中。

1
div { margin-right: auto;  margin-left: auto; width:200px;  height: 200px }

当然也可以这样写

1
div { margin: 0 auto; width:200px;  height: 200px }

跟垂直方向无关,垂直方向可随便设置,只要水平左右都设置为auto即可。注意width宽度一定要设置,没有宽度的块默认就是100%,就没有auto值了。

代码如下:

2.块及元素水平居右:

原理:一侧auto,一侧没设置,则设置auto的一侧分配所有剩余空。

想让div居右显示,已经很简单了。把margin-left 的值设置为auto 即可。代码如下:

1
div { width:200px; height: 200px; margin-left: auto;}

原理:一侧定值,一侧auto,auto为剩余空间大小。代码如下:

1
div { width:200px; height: 200px; margin-left: auto; margn-right: 100px; }


以上方法只能实现水平方向,对于垂直方向是无效的,因为垂直方向没有剩余空间,这点不再解释了。

3.想要实现垂直方向的居中可以用绝对定位。

1
2
3
4
5
6
7
8
9
10
11
div  {
    background: #FF0000;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

margin: auto;  是关键,没有设置此项,也不会水平垂直居中哦。


margin-top: auto; margin-bottom: auto; 仅实现垂直方向居中


解释下原理:

1.在普通内容流中,margin:auto的效果等同于margin-top:0;margin-bottom:0。

2.position:absolute使绝对定位块跳出了内容流,内容流中的其余部分渲染时绝对定位部分不进行渲染。

3.为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框,此时该块块将填充其父元素的所有可用空间,所以margin 垂直方向上有了可分配的空间。

4.再设置margin 垂直方向上下为auto,即可实现垂直居中。(注意高度得设置)。

版权所有©转载必须以链接形式注明作者和原始出处:江湖源码 » margin 实现水平居中,垂直居中原理

最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。
水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法

下面说两种在屏幕正中(水平居中+垂直居中)的方法
放上示范的html代码:

 

<body> <div class=“main”> <h1>MAIN</h1> </div> </body>
  • 方法一:

div使用绝对布局,设置margin:auto;并设置top、left、right、bottom的值相等即可,不一定要都是0。

 

.main{ text-align: center; /*让div内部文字居中*/ background-color: #fff; border-radius: 20px; width: 300px; height: 350px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

效果如图:

  • 方法二:
    仍然是绝对布局,让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了,效果图和上方相同。

 

.main{ text-align: center; background-color: #fff; border-radius: 20px; width: 300px; height: 350px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
  • 方法三:
    对于水平居中,可以使用最简单的<center>标签,不过已经过时了,用法如下:

 

<p><center>123</center></p>

这个<center>标签就是相对于<p>标签里的文字,可以使其居中。

由于center标签已经过时了,所以正规一点的话还是不建议使用的,可以使用如下的方式代替:

 

<p style=“text-align:center;”>123</p>
版权所有©转载必须以链接形式注明作者和原始出处:江湖源码 » HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结

利用递归方法遍历树节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
/// <summary>
/// 遍历树节点
/// </summary>
private void RecursionNodes(TreeListNodes Nodes)
{
    foreach (TreeListNode node in Nodes)
    {
        //如果当前节点下还包括子节点,就调用递归
        if (node.Nodes.Count > 0)
        {
            RecursionNodes(node.Nodes);
        }
        else 
        {
            //设置节点第二列的值,所有节点都有值,则表名遍历到了全部节点
            node.SetValue(1, "Hello June!");
        }
    }
}
版权所有©转载必须以链接形式注明作者和原始出处:江湖源码 » 递归方法遍历树节点,使用Dev的TreeList控件