垂直居中&水平居中&垂直水平居中

垂直居中

行内

单行行内

设置子元素line-height(行高)等于父盒子高度

  .box{
           height: 300px;
           width: 300px;
           background: #FF6666;
       }
    a{
            line-height: 300px;
     }

    111

！！！ 注意：行内元素没有属性width 和 height
还有 margin-top 和 margin-bottom 对内联元素（行内元素）的高度没有影响，并且由于margin是透明的，他也没有任何的视觉影响。

 #box{
           height: 300px;
           width: 300px;
           background: #FF6666;
           margin-top: 100px;
       }
        a{
           color: #6666FF;
            border-bottom: solid red 2px;
            padding-bottom: 30px;
            margin-bottom: 40px;
            margin-left: 20px;
            padding-left: 30px;
            border-left: orange solid 2px;
            background: orangered;
        }

控制台输出auto

多行行内

重新审视一下 CSS vertical-align 属性 的定义：

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

--- inline水平的元素无法设置line-height，所以display要设置成inline-block

方法一：

    
 
    

        测试文字测试文字
    
    

        测试文字 
 测试文字
 测试文字
 测试文字
 测试文字
 测试文字
    

关键：
① 父元素（这里是div）设置和高度一致的 line-height （这里是200px）--- 由后面的vertical-align定义看，这是为了设置div的基线

② 子元素 (这里是span) 设置合适的line-height，并设置display:inline-block、vertical-align: middle; --- inline水平的元素无法设置line-height。所以这里要设置inline-block。

由 CSS vertical-align 属性 的定义可知需要注意 ：

vertical-align属性应该设置到 行内元素上（行内块元素也可）

方法二：

利用display:table-cell

    
 
    

        测试文字测试文字
    
    

        测试文字测试文字
    
    

        测试文字 
 测试文字
 测试文字
 测试文字
 测试文字
 测试文字
    

优点：等高布局，无需设置高度，文字轻松实现垂直居中,不用知道父盒子高度。而方法一中需要知道父盒子高度。

块级

1.定位方法

子绝父相 子盒子top设为50%

1）定高

margin-top：元素高度一半的px（ 注意！！写精具体px 不要写百分数）或者transform:translateY(-50%)

2）不定高

transform:translateY(-50%) 即相对自身高度的一半

2.flexbox(定不定高都可）

水平居中

行内元素

1）若父元素是块级元素，直接给父元素设置text-align：center
2）父元素不是块级元素，将父元素设成块级元素，再设置text-align：center

image.png

块级元素

一.(分宽度定不定）

定宽：
需要谁居中就设置谁的margin：0 auto
不定：
默认子元素宽度与父元素一样，设子元素的display为：inline-block/inline 再给父元素设置text-align:center

二.定位

子绝父相 子元素：left：50%
定宽：
子元素：margin-left：-子元素宽度一半px或transform：translateX（-50%）
不定：
transform：translateX（-50%）

三.flexbox

父元素：display：flex；justfiy-content：center；

水平垂直居中

已知高和宽

子绝父相，定位实现
法一：top：0px；bottom：0px；left：0px；right：0px；margin：auto；
法二：子元素：left：50%；top：50%；margin-left：-宽一半px；margin-top：-高一半px；

未知高和宽

一.定位

left：50%；top：50%；translateX（-50%）translateY（-50%）

二.flex

父元素：display：flex；justfiy-content：center；align-items：center；