HTML--元素居中各种处理方法

1、水平居中

对于行内元素可以使用：

.center-children {
  text-align: center;
}

对于块元素，你可以设置其左右外边距为：auto;同时你还应该设置该元素的宽度，不然的话，元素的宽度会撑满整个浏览器或者一种是没反应（不过你设置背景就会看到了）。

.center-me {
  margin: 0 auto;
}

如果你想让多个块元素在一行当中显示，首先你得设置display的属性，inline-block;在使用上面说的方法。还有一种方式是设置display:flex;justify-content: center;

CSS代码：

 body {
   background: #f06d06;
   font-size: 80%;
 }

 main {
   background: white;
   margin: 20px 0;
   padding: 10px;
 }

 main div {
   background: black;
   color: white;
   padding: 15px;
   max-width: 125px;
   margin: 5px;
 }

 .inline-block-center {
   text-align: center;
 }
 .inline-block-center div {
   display: inline-block;
   text-align: left;
 }

 .flex-center {
   display: flex;
   justify-content: center;
 }

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）如果要多行居中，一般设置上下的内边距来实现，不行的话还有两种方法：一种是将文本放置在表格单中。另一种则是模仿表格的形式。首先为其设置一个容器，再将装有文本的容器放在里面。设置边框，对齐方式，显示方式等就可以了。

 <table>
   <tr>
     <td>
       I'm vertically centered multiple lines of text in a real table cell.
     </td>
   </tr>
 </table>

 <div class="center-table">
   <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
 </div>

 body {
   background: #f06d06;
   font-size: 80%;
 }

 table {
   background: white;
   width: 240px;
   border-collapse: separate;
   margin: 20px;
   height: 250px;
 }

 table td {
   background: black;
   color: white;
   padding: 20px;
   border: 10px solid white;
   /* default is vertical-align: middle; */
 }

 .center-table {
   display: table;
   height: 250px;
   background: white;
   width: 240px;
   margin: 20px;
 }
 .center-table p {
   display: table-cell;
   margin:;
   background: black;
   color: white;
   padding: 20px;
   border: 10px solid white;
   vertical-align: middle;
 }

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示；

display:table- cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说 sorry了。

如果上述方法都不行，恐怕就得使用flex了

 <div class="flex-center">
   <p>I'm vertically centered multiple lines of text in a flexbox container.</p>
 </div>

 body {
   background: #f06d06;
   font-size: 80%;
 }

 div {
   background: white;
   width: 240px;
   margin: 20px;
 }

 .flex-center {
   background: black;
   color: white;
   border: 10px solid white;
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: 200px;
   resize: vertical;
   overflow: auto;
 }
 .flex-center p {
   margin:;
   padding: 20px;
 }

如果这个也行不通的话，使用下面的ghost-center.

 <div class="ghost-center">
   <p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p>
 </div>

 body {
   background: #f06d06;
   font-size: 80%;
 }

 div {
   background: white;
   width: 240px;
   height: 200px;
   margin: 20px;
   color: white;
   resize: vertical;
   overflow: auto;
   padding: 20px;
 }

 .ghost-center {
   position: relative;
 }
 .ghost-center::before {
   content: " ";
   display: inline-block;
   height: 100%;
   width: 1%;
   vertical-align: middle;
 }
 .ghost-center p {
   display: inline-block;
   vertical-align: middle;
   width: 190px;
   margin:;
   padding: 20px;
   background: black;
 }