在日常的開發(fā)過程中，總會(huì)遇到一些情況需要元素居中，下面列舉了部分元素居中方法。
一、實(shí)現(xiàn)不定寬高水平垂直居中
.parent{
????????justify-content:center; /* 子元素水平居中 */
????????align-items:center; /* 子元素垂直居中 */
????????display:-webkit-flex;
}
二、div絕對(duì)定位水平垂直居中-margin:auto實(shí)現(xiàn)絕對(duì)定位元素的居中
.div{
????????width: 100px;
????????height: 100px;
????????border: 4px solid red;
????????text-align: center;
????????position: absolute;
????????left:0;
????????right:0;
????????top: 0;
????????bottom: 0;
????????margin: auto;
????????/*50%為自身尺寸的一半*/
}
代碼關(guān)鍵點(diǎn)：
????????1.上下左右均0位置定位；
????????2.margin: auto; 其width、height如何更改都是居中顯示的，兼容性可以,IE7及之前版本不支持
優(yōu)點(diǎn)：
????????1.支持跨瀏覽器，包括IE8-IE10.
????????2.無需其他特殊標(biāo)記，CSS代碼量少
????????3.支持百分比%屬性值和min-/max-屬性
????????4.只用這一個(gè)類可實(shí)現(xiàn)任何內(nèi)容塊居中
????????5.不論是否設(shè)置padding都可居中（在不使用box-sizing屬性的前提下）
????????6.內(nèi)容塊可以被重繪。
????????7.完美支持圖片居中。
缺點(diǎn)：
????????1.必須聲明高度（查看可變高度Variable Height）。
????????2.建議設(shè)置overflow:auto來防止內(nèi)容越界溢出。（查看溢出Overflow）。
????????3.在Windows Phone設(shè)備上不起作用。
三、div絕對(duì)定位水平垂直居中-margin 負(fù)間距
.div{
????????width: 100px;
????????height: 100px;
????????background-color: green;
????????position: absolute;
????????left: 50%;
????????top: 50%;
????????margin-left: -50px; /*? width/2? */
????????margin-top: -50px; /* height /2 */
}
代碼關(guān)鍵點(diǎn)：
????????1.必需知道該div的寬度和高度，
????????2.然后設(shè)置位置為絕對(duì)位置，
????????3.距離頁面窗口左邊框和上邊框的距離設(shè)置為50%，這個(gè)50%就是指頁面窗口的寬度和高度的50%，
????????4.最后將該div分別左移和上移，左移和上移的大小就是該DIV寬度和高度的一半。
優(yōu)點(diǎn)：
????????1.良好的跨瀏覽器特性，兼容IE6-IE7。
????????2.代碼量少。
缺點(diǎn)：
????????1.不能自適應(yīng)。不支持百分比尺寸和min-/max-屬性設(shè)置。
????????2.內(nèi)容可能溢出容器。
????????3.邊距大小與padding,和是否定義box-sizing: border-box有關(guān)，計(jì)算需要根據(jù)不同情況。
四、div絕對(duì)定位水平垂直居中-Transforms 變形
.div{
????????width: 200px;
????????height: 200px;
????????background-color: pink;
????????position: absolute;
????????left:50%;
????????top: 50%;
????????-webkit-transform: translate(-50%,-50%);
????????-ms-transform: translate(-50%,-50%);
????????transform: translate(-50%,-50%);
}
代碼關(guān)鍵點(diǎn)：
????????內(nèi)容塊定義transform: translate(-50%,-50%)必須加上top: 50%; left: 50%;
優(yōu)點(diǎn)：
????????1.內(nèi)容可變高度
????????2.代碼量少
????????3.不僅能實(shí)現(xiàn)絕對(duì)居中同樣的效果，也支持聯(lián)合可變高度方式使用。
缺點(diǎn)：
????????1.IE8不支持
????????2.屬性需要寫瀏覽器廠商前綴
????????3.可能干擾其他transform效果
????????4.某些情形下會(huì)出現(xiàn)文本或元素邊界渲染模糊的現(xiàn)象
????????有參考一些前輩的方法，跟大家分享一下。
????????加油！這一秒不放棄，下一秒就有希望！堅(jiān)持下去才可能成功！
