html view 居中,HTML
1、水平居中
对于行内元素可以使用：
.center-children{text-align:center;
}
对于块元素，你可以设置其左右外边距为：auto;同时你还应该设置该元素的宽度，不然的话，元素的宽度会撑满整个浏览器或者一种是没反应(不过你设置背景就会看到了)。
.center-me{margin:0 auto;
}
如果你想让多个块元素在一行当中显示，首先你得设置display的属性，inline-block;在使用上面说的方法。还有一种方式是设置display:flex;justify-content: center;
CSS代码：
1 body{
2 background:#f06d06;
3 font-size:80%;
4 }
5
6 main{
7 background:white;
8 margin:20px 0;
9 padding:10px;
10 }
11
12 main div{
13 background:black;
14 color:white;
15 padding:15px;
16 max-width:125px;
17 margin:5px;
18 }
19
20 .inline-block-center{
21 text-align:center;
22 }
23 .inline-block-center div{
24 display:inline-block;
25 text-align:left;
26 }
27
28 .flex-center{
29 display:flex;
30 justify-content:center;
31 }
View Code
HTML代码：
I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do. I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do. I'm an element that is block-like with my siblings and we're centered in a row.2、垂直居中
1)如果只是单行的情况：让行高等于元素的高度来欺骗别人达到居中的目的。
I'm a centered line.View Code
body{background:#f06d06;font-size:80%;
}main{background:white;margin:20px 0;padding:40px;
}main div{background:black;color:white;height:100px;line-height:100px;padding:20px;width:50%;white-space:nowrap;
}
View Code
white-space: nowrap;表示段落中的文本不换行；超出宽度的将不会在显示。
2)如果要多行居中，一般设置上下的内边距来实现，不行的话还有两种方法：一种是将文本放置在表格单中。另一种则是模仿表格的形式。首先为其设置一个容器，再将装有文本的容器放在里面。设置边框，对齐方式，显示方式等就可以了。
1
| 4 I'm vertically centered multiple lines of text in a real table cell.5 |
9
10I'm vertically centered multiple lines of text in a CSS-created table layout.
11 1213 body{
14 background:#f06d06;
15 font-size:80%;
16 }
17
18 table{
19 background:white;
20 width:240px;
21 border-collapse:separate;
22 margin:20px;
23 height:250px;
24 }
25
26 table td{
27 background:black;
28 color:white;
29 padding:20px;
30 border:10px solid white;
31 /*default is vertical-align: middle;*/
32 }
33
34 .center-table{
35 display:table;
36 height:250px;
37 background:white;
38 width:240px;
39 margin:20px;
40 }
41 .center-table p{
42 display:table-cell;
43 margin:0;
44 background:black;
45 color:white;
46 padding:20px;
47 border:10px solid white;
48 vertical-align:middle;
49 }
View Code
border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示；
display:table- cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说 sorry了。
如果上述方法都不行，恐怕就得使用flex了
1
2I'm vertically centered multiple lines of text in a flexbox container.
3 45 body{
6 background:#f06d06;
7 font-size:80%;
8 }
9
10 div{
11 background:white;
12 width:240px;
13 margin:20px;
14 }
15
16 .flex-center{
17 background:black;
18 color:white;
19 border:10px solid white;
20 display:flex;
21 flex-direction:column;
22 justify-content:center;
23 height:200px;
24 resize:vertical;
25 overflow:auto;
26 }
27 .flex-center p{
28 margin:0;
29 padding:20px;
30 }
View Code
如果这个也行不通的话，使用下面的ghost-center.
1
2I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element
3 45
6 body{
7 background:#f06d06;
8 font-size:80%;
9 }
10
11 div{
12 background:white;
13 width:240px;
14 height:200px;
15 margin:20px;
16 color:white;
17 resize:vertical;
18 overflow:auto;
19 padding:20px;
20 }
21
22 .ghost-center{
23 position:relative;
24 }
25 .ghost-center::before{
26 content:" ";
27 display:inline-block;
28 height:100%;
29 width:1%;
30 vertical-align:middle;
31 }
32 .ghost-center p{
33 display:inline-block;
34 vertical-align:middle;
35 width:190px;
36 margin:0;
37 padding:20px;
38 background:black;
39 }
View Code
html view 居中,HTML
1、水平居中
对于行内元素可以使用：
.center-children{text-align:center;
}
对于块元素，你可以设置其左右外边距为：auto;同时你还应该设置该元素的宽度，不然的话，元素的宽度会撑满整个浏览器或者一种是没反应(不过你设置背景就会看到了)。
.center-me{margin:0 auto;
}
如果你想让多个块元素在一行当中显示，首先你得设置display的属性，inline-block;在使用上面说的方法。还有一种方式是设置display:flex;justify-content: center;
CSS代码：
1 body{
2 background:#f06d06;
3 font-size:80%;
4 }
5
6 main{
7 background:white;
8 margin:20px 0;
9 padding:10px;
10 }
11
12 main div{
13 background:black;
14 color:white;
15 padding:15px;
16 max-width:125px;
17 margin:5px;
18 }
19
20 .inline-block-center{
21 text-align:center;
22 }
23 .inline-block-center div{
24 display:inline-block;
25 text-align:left;
26 }
27
28 .flex-center{
29 display:flex;
30 justify-content:center;
31 }
View Code
HTML代码：
I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do. I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do. I'm an element that is block-like with my siblings and we're centered in a row.2、垂直居中
1)如果只是单行的情况：让行高等于元素的高度来欺骗别人达到居中的目的。
I'm a centered line.View Code
body{background:#f06d06;font-size:80%;
}main{background:white;margin:20px 0;padding:40px;
}main div{background:black;color:white;height:100px;line-height:100px;padding:20px;width:50%;white-space:nowrap;
}
View Code
white-space: nowrap;表示段落中的文本不换行；超出宽度的将不会在显示。
2)如果要多行居中，一般设置上下的内边距来实现，不行的话还有两种方法：一种是将文本放置在表格单中。另一种则是模仿表格的形式。首先为其设置一个容器，再将装有文本的容器放在里面。设置边框，对齐方式，显示方式等就可以了。
1
| 4 I'm vertically centered multiple lines of text in a real table cell.5 |
9
10I'm vertically centered multiple lines of text in a CSS-created table layout.
11 1213 body{
14 background:#f06d06;
15 font-size:80%;
16 }
17
18 table{
19 background:white;
20 width:240px;
21 border-collapse:separate;
22 margin:20px;
23 height:250px;
24 }
25
26 table td{
27 background:black;
28 color:white;
29 padding:20px;
30 border:10px solid white;
31 /*default is vertical-align: middle;*/
32 }
33
34 .center-table{
35 display:table;
36 height:250px;
37 background:white;
38 width:240px;
39 margin:20px;
40 }
41 .center-table p{
42 display:table-cell;
43 margin:0;
44 background:black;
45 color:white;
46 padding:20px;
47 border:10px solid white;
48 vertical-align:middle;
49 }
View Code
border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示；
display:table- cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说 sorry了。
如果上述方法都不行，恐怕就得使用flex了
1
2I'm vertically centered multiple lines of text in a flexbox container.
3 45 body{
6 background:#f06d06;
7 font-size:80%;
8 }
9
10 div{
11 background:white;
12 width:240px;
13 margin:20px;
14 }
15
16 .flex-center{
17 background:black;
18 color:white;
19 border:10px solid white;
20 display:flex;
21 flex-direction:column;
22 justify-content:center;
23 height:200px;
24 resize:vertical;
25 overflow:auto;
26 }
27 .flex-center p{
28 margin:0;
29 padding:20px;
30 }
View Code
如果这个也行不通的话，使用下面的ghost-center.
1
2I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element
3 45
6 body{
7 background:#f06d06;
8 font-size:80%;
9 }
10
11 div{
12 background:white;
13 width:240px;
14 height:200px;
15 margin:20px;
16 color:white;
17 resize:vertical;
18 overflow:auto;
19 padding:20px;
20 }
21
22 .ghost-center{
23 position:relative;
24 }
25 .ghost-center::before{
26 content:" ";
27 display:inline-block;
28 height:100%;
29 width:1%;
30 vertical-align:middle;
31 }
32 .ghost-center p{
33 display:inline-block;
34 vertical-align:middle;
35 width:190px;
36 margin:0;
37 padding:20px;
38 background:black;
39 }
View Code