水平居中和垂直居中

• 水平居中设置--行内元素

text-align:center ;
/*如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。*/

• 水平居中设置--定宽块级元素

  当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
  定宽块状元素：块状元素的宽度width为固定值。
  满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

  html代码：
  
    
我是定宽块状元素，哈哈，我要水平居中显示。
  

  css代码：
  

• 水平居中设置--不定宽块状元素

方法一：加入 table 标签，利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
  第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。
  第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

  html代码：
  

    

      

        

        

          
我是第一行文本
          
我是第二行文本
          
我是第三行文本
        
        
      
    
  
  css代码：
  
 
方法二：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。如下例子：
  html代码：
  
    

      

        
1
        
2
        
3
      
    
  
  css代码：
  

  方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

  代码如下：
  
    

      

        
1
        
2
        
3
      
    
  

  css代码：
  

• 垂直居中--父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

 如下代码：
 

   hi,imooc!
 
 css代码：
 

• 隐性改变display类型

position : absolute ;
 float : left ;
 float:right;
只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。