垂直居中
行內
單行行內
設置子元素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>
優(yōu)點：等高布局以清，無需設置高度，文字輕松實現垂直居中,不用知道父盒子高度崎逃。而方法一中需要知道父盒子高度掷倔。
塊級
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；
