垂直居中
行內(nèi)
單行行內(nèi)
設置子元素line-height(行高)等于父盒子高度
.box{
height: 300px;
width: 300px;
background: #FF6666;
}
a{
line-height: 300px;
}
<div class="box">
<a href="">111</a>
</div>
！！！ 注意：行內(nèi)元素沒有屬性width 和 height
還有 margin-top 和 margin-bottom 對內(nèi)聯(lián)元素（行內(nèi)元素）的高度沒有影響，并且由于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
多行行內(nèi)
重新審視一下 CSS vertical-align 屬性 的定義：
該屬性定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內(nèi)容的對齊方式。
--- 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>
關(guān)鍵：
① 父元素（這里是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屬性應該設置到 行內(nèi)元素上（行內(nèi)塊元素也可）
方法二：
利用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)點：等高布局，無需設置高度，文字輕松實現(xiàn)垂直居中,不用知道父盒子高度。而方法一中需要知道父盒子高度。
塊級
1.定位方法
子絕父相 子盒子top設為50%
1）定高
margin-top：元素高度一半的px（ 注意??！寫精具體px 不要寫百分數(shù)）或者transform:translateY(-50%)
2）不定高
transform:translateY(-50%) 即相對自身高度的一半
2.flexbox(定不定高都可）
水平居中
行內(nèi)元素
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；
水平垂直居中
已知高和寬
子絕父相，定位實現(xiàn)
法一：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；
