垂直居中
行内
单行行内
设置子元素line-height(行高)等于父盒子高度
.box{
height: 300px;
width: 300px;
background: #FF6666;
}
a{
line-height: 300px;
}
<div class="box">
<a href="">111</a>
</div>
！！！ 注意：行内元素没有属性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;
}
<body>
<div id="box">
<a href=""id="aaa">111</a>
</div>
<script>
var aaa = document.getElementById("aaa");
var contentHeight = window.getComputedStyle(aaa).height;
var contentWidth = window.getComputedStyle(aaa).width;
console.log(contentHeight);
console.log(contentWidth);
</script>
</body>
控制台输出auto
多行行内
重新审视一下 CSS vertical-align 属性 的定义：
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
--- inline水平的元素无法设置line-height，所以display要设置成inline-block
方法一：
<style>
*{padding: 0;margin:0;font-size: 12px;}
div{
float: left;
width: 200px;
height:200px;
margin: 10px;
border:1px solid blue;
line-height: 200px;
}
span{
display: inline-block;
vertical-align: middle;
line-height: 22px;
}
</style>
<div>
<span>测试文字测试文字</span>
</div>
<div>
<span>测试文字 <br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字</span>
</div>
关键：
① 父元素（这里是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
<style>
*{padding: 0;margin:0;font-size: 12px;}
div{display: table-cell;width: 200px;border:1px solid blue;vertical-align: middle;}
</style>
<div>
<span>测试文字测试文字</span>
</div>
<div>
测试文字测试文字
</div>
<div>
<span>测试文字 <br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字</span>
</div>
优点：等高布局，无需设置高度，文字轻松实现垂直居中,不用知道父盒子高度。而方法一中需要知道父盒子高度。
块级
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
块级元素
一.(分宽度定不定）
定宽：
需要谁居中就设置谁的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；
