如何水平居中一个元素

主要介绍水平居中，垂直居中，水平垂直居中的各种办法：

行内元素水平居中

    .parent{/*在父元素设置*/
        text-align: center;
    }

• 如果块级元素内部包着也是一个块级元素，我们可以先将其由块级元素改变为行内块元素，再通过设置行内块元素达到水平居中

    
  
        
  Demo
    
    
  

块级元素水平居中

这种情形有多种实现方式

• 将该块级元素的左右外边距margin-left和margin-right设置为auto

  .child{
      width: 100px;//确保该块级元素定宽
      margin:0 auto;
  }
  

• 使用table+margin
  先将子元素设置为块级表格来显示，再将其设置水平居中
  display:table在表现上类似block元素，但是宽度为内容宽

    
  
        
  Demo
    
    
  

• 使用absolute+transform
  先将父元素设置为相对定位，再将子元素设置为绝对定位，向右移动子元素，移动距离为父容器的一般，最后通过向左移动子元素的一般宽度以达到水平居中

    
  
        
  Demo
    
    
  

• 使用flex+justify-content
  通过CSS3中的布局利器flex中的justify-content属性来达到水平居中

    
  
        
  Demo
    
    
  

• 使用flex+margin
  通过flex将父容器设置为Flex布局，再设置子元素居中

    
  
        
  Demo
    
    
  

多个块级元素水平居中

• 利用flex布局
  利用弹性布局（flex），实现水平居中，其中justify-content用于设置弹性盒子元素在主轴（默认横轴）方向上的对齐方式

  #container {
      display: flex;
      justify-content: center;
  }
  

-利用inline-block
将要水平排列的块级元素设置为display:inline-boock，然后在父元素上设置text-align:center，达到与上面行内元素的水平居中一样的效果

    .container {
        text-align: center;
    }
    .inline-block {
       display: inline-block;
    }

浮动元素水平居中

• 对于定宽的浮动元素，通过子元素设置relative + 负margin

    .child {
        position:relative;
        left:50%;
        margin-left:-250px;
    }
    
  
      我是要居中的浮动元素
    
  

• 对于不定宽的浮动元素，父子容器都用相对定位
  注意：要清除浮动，给外部元素加上float。这里的父元素就是外部元素

    
  
            
  我是浮动的
            
  我也是居中的
        
        .box{
            float:left;
            position:relative;
            left:50%;
        }
        p{
            float:left;
            position:relative;
            right:50%;
        }
  

• 通用方法(不管是定宽还是不定宽)：flex布局
  利用弹性布局(flex)的justify-content属性，实现水平居中。

    .parent {
        display:flex;
        justify-content:center;
    }
    .chlid{
        float: left;
        width: 200px;//有无宽度不影响居中
    }
    
  
      我是要居中的浮动元素
    
  

绝对定位元素水平居中

通过子元素绝对定位，外加margin: 0 auto来实现

    

            
让绝对定位的元素水平居中对齐。
        
          .parent{
                position:relative;
            }
           .child{
                 position: absolute; /*绝对定位*/
                 width: 200px;
                 height:100px;
                 background: yellow;
                 margin: 0 auto; /*水平居中*/
                 left: 0; /*此处不能省略，且为0*/
                 right: 0;/*此处不能省略，且为0*/
            }