CSS居中方案大全

如果您觉得我的文章有用，欢迎点赞和关注，也欢迎光临我的个人博客https://github.com/BokFang
在这里总结一下CSS水平居中、垂直居中的各种方式。应该说非常全了。

总览一下：

水平居中
1、内联元素水平居中：text-align:center
2、定宽的单个块级元素：margin: 0 auto
3、多个块级元素：inline-block
4、多个块级元素：display:flex
5、不定宽的块级元素：display:table
6、position:absolute + margin-left:-50%
7、position:absolute + margin:auto
垂直居中
1、内联元素：line-height = height
2、块级元素：position + margin-top: -(高度的一半)
3、块级元素：position + transform
4、块级元素：position + margin: auto
5、块级元素：display:flex
6、块级元素：inline-block
7、块级元素：calc()
8、块级元素：display: table-cell
9、padding
10、伪元素
11、table布局

一、水平居中

1、内联元素水平居中：text-align:center

用法：在父级元素的样式中添加text-align:center

  <div class="warpper">
    div
    <p class="inner"></p>
  </div>

.warpper{
  width:100%;
  height:100px;
  background-color:red;
  text-align:center;
}
.inner{
  width:50px;
  height:50px;
  background-color:blue;
}

效果图：

image.png

可以看到，text-align:center可以让文字水平居中，但无法让子元素水平居中。

2、定宽的单个块级元素：margin: 0 auto

用法：在元素样式添加margin:0 auto，使其margin-left和margin-right平分块级元素那一行剩余的宽度。

  <div class="warpper">
    <div class="inner"></div>
  </div>

.warpper{
  width:100%;
  height:100px;
  background-color:red;
  text-align:center;
}
.inner{
  background-color:blue;
  margin:0 auto;
}

效果图：

image.png

当然如果你的块级元素没有设置width，那么div就会占满一行，也就没有水平居中的说法了。

3、多个块级元素：inline-block

如果由多个块级元素，则可以使用inline-block配合text-align:center，将inline-block写在需要居中的元素样式上,text-align:center写在父级元素上。

 <div class="wrapper">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
 </div>

.wrapper {
  text-align: center;
  border: 1px solid #ccc;  
  height:100px;
}
.inner {
  width: 50px;
  height: 50px;
  background: red;
  border: 1px solid #ccc;  
  display: inline-block;
}

效果图：

image.png

4、多个块级元素：display:flex

使用flex也可以轻松做到多个块级元素水平居中
用法：在父级元素样式增加display: flex justify-content: center

.wrapper {
  text-align: center;
  border: 1px solid #ccc;  
  height:100px;
    display: flex;
  justify-content: center;
}
.inner {
  width: 50px;
  height: 50px;
  background: red;
  border: 1px solid #ccc;  
}

效果图与第三个一样。
当然，多个块级元素能用的居中方法，在单个块级元素上也同样可以使用。

5、不定宽的块级元素：display:table

使用display:table配合margin:0 auto，可以达到不定宽块级元素居中效果。

    <div class="wrapper">  
      <div class="inner">水平居中</div>
    </div>

.wrapper{
  width:100%;
  height:100px;
  background:red;
}
  .inner{
      display:table;
      margin:0 auto;
    background:white;
  }

效果图：

image.png

6、position:absolute + margin-left:-50%

使用绝对定位给元素一个left:50%，然后再加一个margin-lelt:-(宽度的一半)

css
.wrapper{
  width:100%;
  height:100px;
  background:red;
}
.inner{
  width:50px;
  height:50px;
  background:blue;
  position:absolute;
  left:50%;
  margin-left:-25px;
}

效果图：

image.png

不过缺点很明显，就是你知道元素宽度而且得固定不变，所以是比较蠢的一种写法。

7、position:absolute + margin:auto

.wrapper {
    position: relative;
    height: 100px;
  background:red;
}
.inner {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    background: blue;
}

效果图：

image.png

在样式加个top:0;bottom:0;还能做到水平垂直居中。是个不错的用法
效果图：

image.png

二、垂直居中

1、内联元素：line-height = height

.wrapper{
   height: 100px;
   line-height: 100px;
   border: 1px solid red;
}

效果图：

image.png

2、块级元素：position + margin-top: -(高度的一半)

这个方法和水平居中的第6个方法一样，就不多说了。

3、块级元素：position + transform

.wrapper {
    position: relative;
    height: 100px;
    background:red;
}
.inner {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: blue;
}

效果图：

image.png

4、块级元素：position + margin: auto;

这个和水平居中的第7个方法一样，我也就不多说了。

5、块级元素：display:flex

.wrapper {
    width: 100%;
    height: 100px;
    background:red;
    display: flex;
    align-items: center;
    justify-content: center; 
}
.inner {
    background: blue;
    width:50px;
    height:50px;
}

效果图：

image.png

6、块级元素：inline-block

<div class="wrapper">
    <div class="inner1">inner1</div>
    <div class="inner2">inner2</div>
</div>

.wrapper {
    width: 100px;
    height: 100px;
    background:red;
    position: relative;
}
.inner1, .inner2 {
    display: inline-block;
    vertical-align: middle;
}
.inner1 {
    background: blue;
}
.inner2 {
    height: 100px;
    font-size: 0;
}

效果图：

image.png

7、块级元素：calc()

.wrapper {
   width: 100px;
   height: 100px;
   background:red;
   position: relative;
}
.inner1, .inner2 {
   display: inline-block;
   vertical-align: middle;
}
.inner1 {
   background: blue;
}
.inner2 {
   height: 100px;
   font-size: 0;
}

效果图：

image.png

缺点也比较明显，需要计算。

8、块级元素：display: table-cell

.wrapper {
    width: 100%;
    height: 100px;
    background:red;
    display: table;
}
.inner {
    display: table-cell;
    vertical-align: middle; 
}

效果图：

image.png

9、padding

.wrapper {
    padding: 5% 0;
}
.inner {
    padding: 10% 0;
    background: red;
}

效果图：

image.png

10、伪元素

.wrapper {
    width: 100%;
    height: 100px;
    background:red;
    text-align: center;
}
.inner {
    background: blue;
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
}
.wrapper::before {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;            
}

效果图：

image.png

11、table布局

需要在html中加入<table>标签，比较低效，我就不详写了，想了解的朋友可以Google搜索一下。

如果您觉得我的文章有用，欢迎点赞和关注，也欢迎光临我的个人博客https://github.com/BokFang