CSS水平垂直居中总结

哎，最近项目又遇到水平垂直居中的需求,不做一下总结，总觉得没有level up!

前端知识体系

水平居中

行内元素

父元素块级元素：父元素text-align: center

    
    
    
    
    


    

        我想牵着你的手，从心动到古稀！---酒馆
    

效果如下：

水平居中：父块级

父元素不是块级元素：父元素先设置为块级元素，在设置text-align: center

    
    
    
    
    



    我想牵着你的手，从心动到古稀！---酒馆

效果如下：

水平居中：父非块级

块级元素

方案一

定宽度：谁居中，谁设置margin:0 auto

    
    
    
    
    




    
我想牵着你的手，从心动到古稀！---酒馆

效果如下：

水平居中：块级元素-定宽

不定宽度：子元素设为行内或行内块元素display:inline/inline-block,父元素设置text-align:center

    
    
    
    
    




    
我想牵着你的手，从心动到古稀！---酒馆

效果如下：

水平居中：块级元素-不定宽

方案二：使用定位属性

首先设置：

父元素：相对定位 `position:relative`
子元素：绝对定位`position:absolute` + `left:50%`

其次定宽的话：

子元素:
  margin-left:设置位元素宽度的负一半
  或者：
  transform: translateX(-50%)

    
    
    
    
    




    
我想牵着你的手，从心动到古稀！---酒馆

效果如下：

水平居中：定位属性-定宽

那么不定宽的话：只能用transform: translateX(-50%);

    
    
    
    
    




    
我想牵着你的手，从心动到古稀！---酒馆

效果如下：

水平居中：定位属性-不定宽

方案三：使用flexbox布局实现（宽度定不定都可以）

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

    
    
    
    
    




    
我想牵着你的手，从心动到古稀！---酒馆

效果如下：

水平居中：flexbox布局（宽度不论）

垂直居中

单行的行内元素

只需设置单行的行内元素的：行高（line-height）=盒子高度

    
    
    
    
    




    我想牵着你的手，从心动到古稀！---酒馆

效果如下：

垂直居中：单行的行内元素

多行的行内元素

父元素：display:table-cell;vertical-align:center即可

    
    
    
    
    




    我想牵着你的手，从心动到古稀！我想牵着你的手，从心动到古稀！我想牵着你的手，从心动到古稀！我想牵着你的手，从心动到古稀！---酒馆

效果如下：

垂直居中：多行的行内元素

块级元素

方案一：使用定位

首先设置：

父元素：相对定位 `position:relative`
子元素：绝对定位`position:absolute` + `top:50%`

其次定高的话：

子元素:
  margin-top:设置位元素宽度的负一半
  或者：
  transform: translateY(-50%)

    
    
    
    
    




    
我想牵着你的手，从心动到古稀！---酒馆

效果如下：

垂直居中：定位属性-定高

那么不定高的话：只能用transform: translateY(-50%);

子元素:
  margin-top:设置位元素宽度的负一半
  或者：
  transform: translateY(-50%)

    
    
    
    
    




    
我想牵着你的手，从心动到古稀！---酒馆

效果如下：

垂直居中：定位属性-定高

方案二：flexbox布局实现（不论高度）

只需给块状元素的父元素设置display: flex; align-items: center;

    
    
    
    
    




    
我想牵着你的手，从心动到古稀！---酒馆

效果如下：

垂直居中：flebox布局-不论高度

水平垂直居中

已知高度和宽度的元素

方案一：position+top/right/bottom/left

  父元素:相对定位
  子元素:绝对定位 + top: 0; right: 0; bottom: 0; left: 0; margin: auto;

    
    
    
    
    



    
我想牵着你的手，从心动到古稀！--酒馆

效果如下：

水平垂直居中：宽高定<1>

方案二：position+margin

  父元素:相对定位
  子元素:绝对定位 + left: 50%; top: 50%; margin-left: 元素宽度的负一半; margin-top: 元素高度的负一半;

    
    
    
    
    



    
我想牵着你的手，从心动到古稀！--酒馆

效果如下：

水平垂直居中：宽高定<2>

未知高度和宽度的元素

方案一：使用定位属性

  父元素:相对定位
  子元素:绝对定位 + left: 50%; top: 50%; + transform: translateX(-50%) translateY(-50%);

    
    
    
    
    



    
我想牵着你的手，从心动到古稀！

效果如下：

水平垂直居中：宽高未知<1>

方案二：使用flex布局实现

  父元素:
    display:flex;
    justify-content: center; 
    align-items: center;

    
    
    
    
    



    
我想牵着你的手，从心动到古稀！---酒馆

效果如下：

水平垂直居中：宽高未知<1>