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

<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>

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 <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 }

View Code

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 }

View Code

如果这个也行不通的话，使用下面的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 }

View Code

 

转载于:https://www.cnblogs.com/huansky/p/5291196.html