蓝狮官网前端技巧:css居中(不确定宽度)

切图公司专门从事web前端开发,要想让一个box居中,蓝狮官网立马想到最常用的就是margin:0 auto; 即便是position:absolute绝对定位下,也可以通过 left:50%; margin-left- (宽度的一半)来实现, 但是这个的前提是必须知道盒子的宽度,所以盒子居中主要有两种情况:

一.确定盒子的宽度,解决办法有:
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;

0 Comments
Leave a Reply