CSS盒子的水平垂直居中

1,367 阅读4分钟
  • 水平居中写了5种方法,垂直居中写了5种方法,水平垂直居中写了7种方法,实际上只有6种;

一.水平居中

指当前元素在父级元素容器中,水平方向是居中显示的;有以下几种方法:

方案一:text-align:center;

给父元素添加 text-align:center; 
子元素若为行内元素,行内块元素,文本,则可实现水平居中 。

方案二:单个块级元素水平居中用margin

子元素宽度必须小于父元素宽度,并且要给子元素定宽

子元素设置 margin:0 auto;

方案三:多个块级元素水平居中用行内块

1.子元素设置 display: inline-block;
2.给父元素添加 text-align:center;
3.行内块元素的的换行空格会产生间隙影响,想要消除就需给父元素设置 font-size: 0px;但是会影响子元素里的文字不见,可以单独给子元素设置文字大小;

方案四:定位(不需要宽高都行)

子绝父相,top,right,bottom,left 的值是相对父元素尺寸的,然后 margin 或 transform 是相对自身尺寸的,组合使用达到居中效果。

给子元素设置绝对定位,父元素设置相对定位
子元素设置: left: 50%;
            margin-left: -150px;或者 transform: translateX(-50%);  
            /*-150px 是自身宽度的一半*/

方案五:任意个元素用 flex

原理:设置当前主轴对齐方式为居中
给父元素设置一下两个属性 display: flex;
                       justify-content: center;

二.垂直居中

方案一:line-height

对于单行文本/行内元素/行内块级元素 :高度等于行高的值
.parent { 
            height:150px;
            line-height:150px; //高度等于行高的值;
         } 

方案二:多行文本/行内元素/行内块级元素

  • 行高:等于 height/行数
.parent{
            height:150px;
            line-height:30px;   /*行高等于 height/行数;*/
        } 

方案三:图片元素

.wrapper {
	height: 200px;
	line-height: 200px;
	font-size: 0;
     }
     
.img     {
	vertical-align: middle;
    }
    /*
   vertical-align: middle;属性的作用并不是将子元素的垂直中点和父元素的垂直中点对齐,而是元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐。
   而当字体大小为0时,基线的位置就等于中线的位置; 
    */

方案四:单个块级元素有多种方法

4.1- 使用 tabel-cell 实现:
    .parent {
      display: table-cell;
      vertical-align: middle;
    }
4.2- 使用 position 实现:
  • 子绝父相,top、right、bottom、left 的值是相对于父元素尺寸的,然后 margin 或者 transform 是相对于自身尺寸的,组合使用达到垂直居中的目的;
     #parent {
      position: relative;
    }
    #child {
      height: 100px;
      position: absolute;
      top: 50%;
      margin-top: -50px;//自身高度反向的一半transform:translateY(-50%)
    }
    
    或者
     #child {
      height: 100px;
      position: absolute;
      margin:auto;
      top0bottom0;
      }
4.3- 利用 flex 实现
.parent {
        display: flex;
        align-items: center;
      }

方案五:任意个元素:

    .parent {
        display: flex;
        align-items: center;
      }

 或 .parent {
        display: flex;
      }
      .son {
        align-self: center;
      }
      
或 .parent {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

三.水平垂直居中(居中布局)

  • 居中布局实际上就是既要水平方向居中,也要垂直方向居中; 原来的样式:
 .father {
        height: 200px;
        background-color: red;
      }
      .son {
        width: 100px;
        height: 100px;
        background-color: pink;
      }

方案一:用margin+overflow

 .son {
        margin: 50px auto;
      }
      
 .father {
        overflow: hidden;
      }

方案二:给父元素padding(只需一个方位挤压)

要知道父元素的宽高则更好办,给父元素加填充,为父盒子大小减去子盒子大小的一半,然后给父盒子加怪异合模型 
.father {
        padding: 50px 0 0 50px;
        box-sizing: border-box;
      }

方案三:定位 :子绝父相

子元素方位设置50%,并自身反向移动50%,有margin和transform两种

.father {
        position: relative;
      }
.son {
        position: absolute;
        top: 50%;
        left: 50%;
      }
 /*这一步把子元素的左上角移动到父元素的中心*/
 
 接下来应该这样做:反向移动自身的一半
 .son {
        transform: translate(-50%, -50%);
      }
 或者这样做:
 .son {
        margin: -50px 0 0 -50px;
      }

方案四:定位:上下左右四个方位都为0,然后设置margin:auto

 .father {
        position: relative;
      }
 .son {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }

方案五:flex设置两轴方向排布

 .father {
        display: flex;
        justify-content: center; /*主轴方向居中*/
        align-items: center; /* 交叉轴方向居中 */
      }

方案六: table-cell+margin

 .father {
        display: table-cell;
        vertical-align: middle; /* 把子元素变成自己的内容,垂直居中 */
      }
      
 .son {
        margin: 0 auto;/* 自己左右居中 */
      }
/* 
  优点: 浏览器的兼容性比较好;
  缺点:vertical-align 属性具有继承性,导致父元素的文本也是居中显示的;
*/

方案七:多行文字水平垂直居中table-cell

 .father {
        display: table-cell; /* 模拟为td单元格,同时形成了 BFC */
        vertical-align: middle; /* 垂直居中*/
        text-align: center; /* 水平居中*/
      }
      
  .son {
        display: inline;
      }