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;

 }

巴特西

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

1、水平居中

最新文章

热门文章