CSS盒子水平垂直居中

垂直居中

1：子元素是行内元素，高度是由其内容撑开的

• 单行：设定父元素的line-height为其高度来使得子元素垂直居中
• 多行：通过给父元素设定display:inline/inline-block/table-cell;vertical-align:middle来解决

2：子元素是块级元素但是子元素高度没有设定

• 解法1：通过给父元素设定display:inline/inline-block/table-cell; vertical-align:middle来解决
• 解法2：flexbox:给父元素添加以下代码

    display: flex;
    flex-direction: column;
    justify-content: center;

3：子元素是块级元素且高度已经设定

• 解法1：计算子元素的margin-top或margin-bottom
  • 给父元素和子元素都设定了box-sizing:border-box
  • (父高-子高)/2
• 解法2：计算父元素的padding-top或padding-bottom
  • 给父元素和子元素都设定了box-sizing:border-box
  • (父高-子高)/2
• 解法3：利用绝对定位，让子元素相对于父元素绝对定位：父相子绝
  • 子元素宽已知： 子：top:50%; margin-top: -子高一半
  • 子元素宽未知： 子: top:50%; transform:translateY(-50%)
• 解法4：利用flexbox
  • 父元素

    display: flex;
    flex-direction: column;
    justify-content: center;

水平垂直同时居中:五种方法

1. 通过定位，给父盒子相对定位，子盒子绝对定位，top、left为50%，在margin-left : -（子盒子一半）px; margin-top: -（子盒子高的一半）px;

    .father {
            position: relative;
            height: 200px; 
            width: 200px;
            background-color: pink;
            }
    .son { 
            position: absolute; 
            top: 50%; 
            left: 50%; 
            margin-left: -50px; 
            margin-top: -50px; 
            width: 100px; 
            height: 100px; 
            background-color: red; 
            }

2.不依赖通过计算子盒子的宽高进行定位，可以用transform: translate 移动自身的一半就行了

    .father {
            position: relative;
            height: 200px; 
            width: 200px;
            background-color: pink;
            }
     .son { 
            position: absolute; 
            top: 50%; 
            left: 50%; 
            transform: translate(-50%, -50%);
            width: 100px; 
            height: 100px; 
            background-color: red; 
            }

3.子盒子定位时，top、left、right、bottom都设置为0，然后margin: auto; 也能实现居中

   .father {
            position: relative;
            height: 200px; 
            width: 200px;
            background-color: pink;
            } 
   .son { 
            position: absolute; 
            top: 0; 
            left: 0; 
            bottom: 0; 
            right: 0;
            margin: auto;
            width: 100px; 
            height: 100px; 
            background-color: red; 
            }

4.通过flex布局，设置垂直水平都居中

    .father {
            display: flex; 
            justify-content: center; 
            align-items: center;
            height: 200px; 
            width: 200px;
            background-color: pink;
            }
     .son { 
            width: 100px; 
            height: 100px; 
            background-color: red; 
            }

5.通过display:table-cell   注: 子盒子要设置为 display:inline-block;

    .father {
            display:table-cell;
            vertical-align:middle; 
            text-align:center;
            height: 200px; 
            width: 200px;
            background-color: pink;
            }
     .son { 
            width: 100px; 
            height: 100px; 
            display: inline-block;
            background-color: red; 
            }