天天看點

css 盒子水準居中(确定寬度和不确定寬度)

說到讓一個div水準居中,立馬想到最常用的就是margin:0 auto;但是這個的前提是必須知道盒子的寬度,盒子居中主要有兩種情況:

一.确定盒子的寬度,解決辦法有:

1.1 margin:0 auto;

1.2   position:relative;left:50%;margin-left:-0.5*width;(用絕對定位也可以)

二.不确定盒子寬度的,而且盒子寬度可變的,方法如下

2.1 position:relative:left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);//這裡的50%是指盒子本身的50%;

2.2 width:fit-content;width:-moz-fit-content;width:-webket-fit-content;margin:auto;