水平居中

1、行内或类行内元素

在块级父容器中让行内元素居中，只需使用 text-align: center;

  1. .text-center {
  2.     text-align: center !important;
  3. }

这种方法可以让 inline/inline-block/inline-table/inline/flex 等类型的元素实现居中。

2、固定宽度块级元素

可以设置左右margin值为auto来使用，如下：

  1. .item-center {
  2.     width: 400px;
  3.   margin: auto; 
  4. }

3、不定宽度块状元素

  1. 1、元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto
  2. 2、给该元素设置 display:inine，转变为内联元素
  3. 3、父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%

垂直居中

1、内联元素（单行）

  • 为它们添加等值的 padding-top 和 padding-bottom

    1. padding-top: 30px;
    2. padding-bottom: 30px;

  • 设置line-height的值等于height值

    1. height: 100px;
    2. line-height:100px;

    2、内联元素（多行）

    可以使用vertical-align实现垂直居中，不过vertical-align仅适用于内联元素和table-cell元素，因此之前需要转化。

    1. display:table-cell; /*转化成table-cell元素*/
    2. width:200px;
    3. height:100px;
    4. vertical-align:middle;

    此外，还可以使用flexbox实现垂直居中。

    1. display: flex;
    2. justify-content: center;
    3. flex-direction: column;
    4. height: 400px;

3、块级元素

不常用，可参见居中指南(https://www.w3cplus.com/css/centering-css-complete-guide.html)