水平居中
方式一:inline-block + text-align
#1.設(shè)置居中對(duì)象為“行內(nèi)塊”
display: inline-block;
#2.設(shè)置居中對(duì)象的父級(jí)容器文本居中
text-align: center;
#缺點(diǎn):居中對(duì)象內(nèi)容也會(huì)受到父級(jí)容器影響,文本內(nèi)容將被居中挑辆,并不好
方式二:margin
//只需要給居中對(duì)象設(shè)置如下值
display: table 或 block;
margin: 0px auto;
方式三:absolute + transform
// 設(shè)置父級(jí)對(duì)象定位類(lèi)型
position: relative; // 開(kāi)啟父級(jí)定位
// 設(shè)置居中 對(duì)象
position: absolute; // 絕對(duì)定位
left: 50%; // 左側(cè)占50%
transform: translateX(-50%); // 向左移動(dòng)居中對(duì)象的一半
方式四:相對(duì)定位relative;
position: relative;
left: 50%; // 相對(duì)于原來(lái)的位置
transform: ftranslateX(-50%)