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代码：

2、垂直居中

1)如果只是单行的情况：让行高等于元素的高度来欺骗别人达到居中的目的。

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

8

9

12

13 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

4

5 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

4

5

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