table居中显示_css各种居中方法总结

前言

在使用css设置页面样式时会经常遇到需要居中的情况，下面我总结了一些css在不同条件下实现居中的方法。有一些方法具有一些hack的味道，大家看看就好。为了方便显示居中效果，给父元素和子元素都设置了边框和背景样式，由于效果都差不多，对于每一个方法我就不截图显示了，水平居中的大概实现是这样的 

1，水平居中+阻止子元素定宽+ margin

    
      .parent {
border: 1px solid #000;
background-color: rgb(214, 120, 52);
height: 200px;
      }

      .child {
border: 1px solid #000;
background-color: chartreuse;
font-size: 32px;
width: 150px;
margin: 0 auto;
      }

class="parent">

class="child">children 子元素


复制代码

2，水平居中+ inline-block子元素不定宽+ text-align

      .parent2 {
border: 1px solid #000;
background-color: rgb(214, 120, 52);
height: 200px;
text-align: center;
      }

      .child2 {
border: 1px solid #000;
background-color: chartreuse;
font-size: 32px;
display: inline-block;
      }

class="parent2">

class="child2">children 子元素


复制代码

3，水平居中+ inline-block子元素定宽+ text-align

      .parent3 {
border: 1px solid #000;
background-color: rgb(214, 120, 52);
height: 200px;
text-align: center;
      }

      .child3 {
border: 1px solid #000;
background-color: chartreuse;
font-size: 32px;
width: 150px;
display: inline-block;
      }

class="parent3">

class="child3">children 子元素


复制代码

4，水平居中+内联子元素不定宽+ text-align

inline类型的元素设置高宽是无效的，因此也没有定不定宽的陈述，这里写上是为了看起来一致

      .parent4 {
border: 1px solid #000;
background-color: rgb(214, 120, 52);
height: 200px;
text-align: center;
      }

      .child4 {
border: 1px solid #000;
background-color: chartreuse;
font-size: 32px;
display: inline;
      }

class="parent4">

class="child4">children 子元素


复制代码

5，水平垂直居中+ flex +子元素不定宽高

      .parent5 {
border: 1px solid #000;
background-color: rgb(214, 120, 52);
height: 200px;
display: flex;
justify-content: center;
align-items: center;
      }

      .child5 {
border: 1px solid #000;
background-color: chartreuse;
font-size: 32px;
      }

class="parent5">

class="child5">children 子元素


复制代码

6，水平垂直居中+ flex +子元素不定宽高+ margin

      .parent6 {
border: 1px solid #000;
background-color: rgb(214, 120, 52);
height: 200px;
display: flex;
      }

      .child6 {
border: 1px solid #000;
background-color: chartreuse;
font-size: 32px;
margin: auto;
      }

class="parent6">

class="child6">children 子元素


复制代码

7，水平垂直居中+网格+子元素不定宽高

      .parent7 {
border: 1px solid #000;
background-color: rgb(214, 120, 52);
height: 200px;
display: grid;
justify-content: center;
align-items: center;
      }

      .child7 {
border: 1px solid #000;
background-color: chartreuse;
font-size: 32px;
      }

class="parent7">

class="child7">children 子元素


复制代码

8，水平垂直居中+网格+子元素不定宽高(居中属性设置在子元素上)

      .parent7-2 {
border: 1px solid #000;
background-color: rgb(214, 120, 52);
height: 200px;
display: grid;
      }

      .child7-2 {
border: 1px solid #000;
background-color: chartreuse;
font-size: 32px;
justify-self: center;
align-self: center;
      }

class="parent7-2">

class="child7-2">children 子元素


复制代码

9，水平垂直居中+网格+子元素不定宽高+ margin

      .parent8 {
border: 1px solid #000;
background-color: rgb(214, 120, 52);
height: 200px;
display: grid;
      }

      .child8 {
border: 1px solid #000;
background-color: chartreuse;
font-size: 32px;
margin: auto;
      }

class="parent8">

class="child8">children 子元素


复制代码

10，水平垂直居中+ absolute +子元素定宽高+ margin

      .parent9 {
border: 1px solid #000;
background-color: rgb(214, 120, 52);
height: 200px;
position: relative;
      }

      .child9 {
border: 1px solid #000;
background-color: chartreuse;
font-size: 32px;
margin: auto;
width: 150px;
height: 100px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
      }

class="parent9">

class="child9">children 子元素


复制代码

11，水平垂直居中+ absolute +子元素不定宽高+ margin

fit-content这属性具有相容问题

        .parent10 {
border: 1px solid #000;
background-color: rgb(214, 120, 52);
height: 200px;
position: relative;
        }

        .child10 {
border: 1px solid #000;
background-color: chartreuse;
font-size: 32px;
margin: auto;
position: absolute;
width: fit-content;
height: fit-content;
left: 0;
right: 0;
bottom: 0;
top: 0;
        }

class="parent10">

class="child10">children 子元素


复制代码

12，水平垂直居中+ absolute +子元素不定宽高+ transform

          .parent11 {
border: 1px solid #000;
background-color: rgb(214, 120, 52);
height: 200px;
position: relative;
          }

          .child11 {
border: 1px solid #000;
background-color: chartreuse;
font-size: 32px;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
          }

class="parent11">

class="child11">children 子元素


复制代码

13，水平垂直居中+ table-cell +子元素不定宽高+ text-align + vertical-align

 
          .parent12 {
border: 1px solid #000;
background-color: rgb(214, 120, 52);
height: 200px;
/* width 设置百分比会失效,如果宽度不设置就由子元素的内容宽度决定 */
width: 1000px;
display: table-cell;
text-align: center;
vertical-align: middle;
          }

          .child12 {
border: 1px solid #000;
background-color: chartreuse;
font-size: 32px;
          }

class="parent12">

class="child12">children 子元素


复制代码

14，水平垂直居中+ inline / inline-block子元素不定宽高+ vertical-align

          .parent13 {
border: 1px solid #000;
background-color: rgb(214, 120, 52);
height: 200px;
text-align: center;
          }

          .parent13::before {
content: "";
line-height: 200px;
font-size: 0;
          }

          .child13 {
border: 1px solid #000;
background-color: chartreuse;
font-size: 32px;
/* display: inline-block; */
display: inline;
vertical-align: middle
          }

class="parent13">

class="child13">children 子元素


复制代码

15，水平垂直居中+书写模式+内联/内联块子元素不定宽高+ text-align

这个方法受最小尺寸影响，也是有兼容问题的

          .parent15 {
border: 1px solid #000;
background-color: rgb(214, 120, 52);
height: 200px;
writing-mode: vertical-lr;
text-align: center;
          }

          .child15 {
border: 1px solid #000;
background-color: chartreuse;
font-size: 32px;
writing-mode: horizontal-tb;
/* display: inline; */
display: inline-block;
width: 100%;
          }

class="parent15">

class="child15">children 子元素


复制代码

16，水平垂直居中+水平垂直居中+块子元素定宽+父元素高度由子元素决定+ padding / margin

          .parent16 {
border: 1px solid #000;
background-color: rgb(214, 120, 52);
          }

          .child16 {
border: 1px solid #000;
background-color: chartreuse;
font-size: 32px;
width: 150px;
/* margin: auto; */
/* padding: 50px 0; */
margin: 50px auto;
          }

class="parent16">

class="child16">children 子元素


复制代码

17，水平垂直居中+子元素不定宽高+父元素高度由子元素决定+ line-height

          .parent17 {
border: 1px solid #000;
background-color: rgb(214, 120, 52);
text-align: center;
          }

          .child17 {
border: 1px solid #000;
background-color: chartreuse;
font-size: 32px;
/* display: inline-block; */
display: inline;
line-height: 200px;
          }

class="parent17">

class="child17">children 子元素


复制代码

18，正方形十字居中

          .parent18 {
border: 1px solid #000;
background-color: rgb(214, 120, 52);
width: 20%;
position: relative;
          }
          .parent18::before {
content: "";
display: block;
width: 0;
height: 0;
padding: 50% 0;
          }

          .child18::before, .child18::after {
content: "";
display: block;
position: absolute;
background-color: chartreuse;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
          }
          .child18::before {
width: 50%;
height: 5%;
          }
          .child18::after {
height: 50%;
width: 5%;
          }

class="parent18">

class="child18">


复制代码

总结

主要总结了一些日常遇到的css居中方法，其中双重的方法也可以组合使用.