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 }
HTML代码:
<main class="inline-block-center">
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
<div>
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.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
</main>
<main class="flex-center">
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
<div>
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.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
</main>
2、垂直居中
1)如果只是单行的情况:让行高等于元素的高度来欺骗别人达到居中的目的。
<main> <div> I'm a centered line. </div> </main>
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; }
white-space: nowrap;表示段落中的文本不换行;超出宽度的将不会在显示。
2)如果要多行居中,一般设置上下的内边距来实现,不行的话还有两种方法:一种是将文本放置在表格单中。另一种则是模仿表格的形式。首先为其设置一个容器,再将装有文本的容器放在里面。设置边框,对齐方式,显示方式等就可以了。
1 <table> 2 <tr> 3 <td> 4 I'm vertically centered multiple lines of text in a real table cell. 5 </td> 6 </tr> 7 </table> 8 9 <div class="center-table"> 10 <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p> 11 </div> 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 }
border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示;
display:table- cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7只能对你说 sorry了。
如果上述方法都不行,恐怕就得使用flex了
1 <div class="flex-center"> 2 <p>I'm vertically centered multiple lines of text in a flexbox container.</p> 3 </div> 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 }
如果这个也行不通的话,使用下面的ghost-center.
1 <div class="ghost-center"> 2 <p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p> 3 </div> 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 }