如何水平居中一个元素

主要介绍水平居中,垂直居中,水平垂直居中的各种办法:

行内元素水平居中
    .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*/ }

你可能感兴趣的:(如何水平居中一个元素)