垂直居中

方法一

这个方法把div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align属性。

    
         
         
                 
     
        
      
            
       
我要用表格属性垂直居中
            
       
我要用表格属性垂直居中
            
       
我要用表格属性垂直居中
        
      
     
     
 

 

实现如图：

能在本身里垂直居中；

优点：

container 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时，container 不会被截断

缺点：

Internet Explorer(甚至 IE8 )中无效，许多嵌套标签(其实还好）。

方法二

这个方法使用绝对定位的 div，top 设置为 50％， margin-top 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。

因为有固定高度，或许你想给 content 指定 overflow:auto，这样如果 content 太多的话，就会出现滚动条，以免content 溢出。

    
                      
     
            
      
我要用绝对定位垂直居中
            
      
我要用绝对定位垂直居中
            
      
我要用绝对定位垂直居中
        
     
 

效果图：

相对于父元素垂直居中；

优点：

• 适用于所有浏览器
• 不需要嵌套标签

缺点：

• 没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况)

方法三

这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto;会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的

    
                 
     
        
      
我要用绝对定位垂直居中
        
      
我要用绝对定位垂直居中
        
      
我要用绝对定位垂直居中
    
     

效果图：

方法四：将单行文本垂直居中

这个方法只能将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。

    
                 
     
        
      
我要用绝对定位垂直居中
    
     

效果图：

 

 

水平居中

方法一：行内元素水平居中

只需要把行内元素包裹在一个属性display为block的父层元素中，并且把父层元素添加如下属性即可：

.parent {
        text-align:center;}

示例：

      
      
       我是文本，哈哈，我想要在父容器中水平居中显示。
       我也是行内元素
      
      
       图片是行内块状元素
      
      
       
      

效果图：

方法二：定宽块状元素水平居中

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的

 

.item {
        margin: 10px auto;}

示例：

      
      
       我是定宽块状元素，我要水平居中显示。
      

效果图：

 

方法三：不定宽块状元素水平居中（多个块状元素水平居中）

将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可:

      
      
    
       
        
        
1
        
        
2
        
        
3
    
       
      

效果图：

方法三：不定宽块状元素水平居中

利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

.parent{
      display:table;  margin:0 auto;}

示例：

      
      
            
       
我是第一行文本
        
       
我是第二行文本
        
       
我是第三行文本
      
      
         设置我所在的div容器水平居中  
      

效果图：

方法四：不定宽块状元素水平居中

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

.container{
        float:left;    position:relative;    left:50%}.container ul{
         position:relative;    left:-50%;}

示例：

      
      
  
       
      
        
1
        
        
2
        
        
3
    
       
      
      
      
    
       
        我们来学习一下这种方法。
       
      

效果图：

 

 

定宽定高块状元素垂直水平居中

方案一：

父元素设置为：position: relative; 

子元素设置为：position: absolute;

距上50%，据左50%，然后减去元素自身宽度的距离就可以实现 top:50%;left:50%;margin:-height/2 0 0 -width/2;

      
      
       我是定宽块状元素，我要垂直水平居中显示。
      

 

2.flex布局

      
      
       
我是定宽块状元素，我要垂直水平居中显示。
      

 

3.表格属性垂直水平居中

    
          
          
                  
      
        
       
            
        
我要用表格属性垂直水平居中
            
        
我要用表格属性垂直水平居中
            
        
我要用表格属性垂直水平居中