CSS中实现居中的方式

一、水平居中

1.用 text-align + inline-block 水平居中

1.1 实现方法

• html代码

  
      
  
          
  我是元素1
      
  
  

• css代码

• 效果

  
  
  text-align居中效果图

1.2 步骤

（1）先观察父级元素下的子元素是否为行内元素，或具有行内元素的特征，如果是块级元素的话，用display:inline-block;将块级元素转换成行块元素
（2）在父级中写入text-align:center;设置水平居中

1.3 注意

• text-align能对文本以及行内元素进行水平居中，块级元素不行
• 如果要对块级元素进行居中的话，需要将块级元素用display:inline-block;设置成行块元素后才能居中
• text-align使用的元素下面的所有具有行内元素的特点的元素都能起到作用，是具有继承性的，如上图代码中，蓝色div中有span标签，那么span标签也会居中与蓝色div中

2.用定位（postion） + 变形（transform）水平居中

2.1 实现方法

• css代码

• 效果图

  
  
  postion定位居中效果图

2.2 实现步骤

（1）父元素开启定位（relative，absolute,fixed都可以），并将子元素设置绝对定位absolute
（2）设置子元素对于父元素向左移动50%（left:50%;），此时并不是居中状态，而是子元素的左边框位于50%的中线
（3）设置子元素的变形，与自身现在的状态向左移动自身的50%，也就是在X轴上向负方向移动50%（transform: translateX(-50%);）,此时实现居中

2.3 注意

• 父级元素是否脱离文档流，不影响子元素水平居中效果，但是transform是css3属性，存在浏览器兼容问题
• postion定位居中方式，只对父级下面的子元素起作用，对子元素下面的后代元素不起作用

3.用 margin: 0 auto + display: block 水平居中

3.1 实现方法

• html代码

  
        我是元素1
  
  

• css代码

3.2 实现步骤

（1）先观察父级元素下的子元素是否为块级元素，若不是，则先用display: block;设置为块级元素
（2）再对子元素块级元素设置宽高
（3）在子元素里面写入margin: 0 auto;实现水平居中

3.3 注意

• 父级下面的子元素只能是块级元素，不能是行块元素和行内元素（不能具有行内元素特征）
• 子元素必须设置宽度，因为子元素块级元素默认与父级的宽度一致
• 这个方法只需要对子元素进行设置就可以实现水平居中，margin设置auto表示浏览器会自动分配，实现来外边距等分效果
• 当同级元素设置了margin: 0 auto;以后，同级元素之间不能进行设置margin-top、margin-bottom等操作
• margin: 0 auto;居中的所有操作都在子元素里面进行操作

4.flex弹性盒子布局水平居中

4.1 实现方法

• html 代码

• 效果图

  
  
  flex布局居中效果图

4.2 实现步骤

（1）设置容器为flex布局
（2）用justify-content: center;属性设置项目主轴方向（此时主轴方向为水平方向）居中

4.3 注意

• 不论子元素是块元素还是行内元素，flex都能实现居中
• flex布局实现水平居中的所有操作都在容器（父元素）里面进行操作

二、垂直居中

1. 固定高度（height） = 行高（line-height）

1.1 实现方法

• css代码

• 效果图

  
  
  line-height垂直居中效果图

1.2 实现步骤

（1）设置父级元素的高度height
（2）设置父级元素的行高line-height

1.3 注意

• 次方法只针对父级元素下面只有一个块级子元素的时候，或者是一行行内元素的时候（此时行内元素不能进行换行操作）

2. 用定位（postion） + 变形（transform）垂直居中

2.1 实现方法

• css代码

• 效果图

  
  
  postion垂直居中效果图

2.2 实现步骤

（1）父元素开启定位（relative，absolute,fixed都可以），并将子元素设置绝对定位absolute
（2）设置子元素对于父元素向下移动50%（top:50%;），此时并不是居中状态，而是子元素的上边框位于50%的中线
（3）设置子元素的变形，与自身现在的状态向左移动自身的50%，也就是在Y轴上向负方向移动50%（transform: translateY(-50%);）,此时实现居中

3.display: table-cell + vertical-align 垂直居中

3.1 代码

• css代码

• 效果图

  
  
  vertical-align垂直居中效果图

3.2 实现步骤

（1）将父级元素设置成display: table-cell;
（2）写入vertical-align:middle;实现居中

3.3 注意

• vertical-align属性具有继承性，导致父元素内文本也是垂直居中显示的

4. flex弹性盒子布局垂直居中

4.1 实现方法

• css代码

• 效果图

  
  
  flex垂直居中效果图

4.2 实现步骤

（1）设置容器为flex布局
（2）将容器的排序方式设置为列方向排序（flex-direction: column;）
（3）用justify-content: center;属性设置项目主轴方向（此时主轴方向为垂直方向）居中

三、总结

1.inline-block + text-align 设置水平居中时只对行内元素或行块元素（具有行内元素特征）的元素起作用，有继承性，会对起后代元素都起作用

2.display: block + margin: 0 auto 设置水平居中时只对块级元素起作用，无继承性

3.display: table-cell + vertical-align设置垂直居中时，对行内元素和块级元素都起作用，有继承性

4.用固定高度（height） = 行高（line-height）设置垂直居中时，下面的块级元素只能是一个，或者只能有一行行内元素

5.用定位（postion） + 变形（transform）设置水平居中和垂直居中时，对行内元素和块级元素都器作用

6.用flex设置垂直和水平居中时，对行内元素和块级元素都器作用