元素居中的几种表现形式

水平居中

text-align:center;
在其父元素上设置 text-align:center；属性 就可以是文字或者图片水平居中

.content{
      text-align:center;
}

margin
给元素设置宽度，利用margin：0 auto；属性进行居中设置;

  
你好
  
不样钓鱼

水平居中.png

垂直居中

文字不定宽高居中 利用元素属性 上下padding相等 text-align:center;即可实现 实例如下

  
你好
  
你好请继续加油

效果图如下

不定宽高.png

绝对定位实现居中
定宽定高 利用绝对定位 相对于自身实现居中 里面的文字内容 利用负margin
实例如下

  
我是标题
    
我是内容

效果图如下 ：

image.png

还有一种形式是不定宽高
利用css3的属性 transform:translate(-50%,-50%);相等对于自身，也可以达到同样的 效果 范例如下：

  
我是标题dfdfdfddd
  
我是标题dfdfdfddd
  
我是标题dfdfdfddd
    
我是内容

效果图如下 ：

css3属性实现居中.png

vertical-align实现居中
原理 利用伪元素 为参照基线 实现垂直对齐 很巧妙

• 使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本的内的图片：

利用基线为参照物.png

table-cell实现居中
这个居中方式和上面的差不多 利用display:table-cell属性 相当巧妙 使代码相当简洁

效果图如下

相当简洁.png

display: flex
弹性布局 实现居中

效果图 如下 ：

弹性布局居中.png