在切图公司专门从事web前端开发,要想让一个box居中,立马想到最常用的就是margin:0 auto; 即便是position:absolute绝对定位下,也可以通过 left:50%; margin-left- (宽度的一半)来实现, 但是这个的前提是必须知道盒子的宽度,所以盒子居中主要有两种情况:,下面我们就来说一说关于css页面居中怎么设置?我们一起去了解并探讨一下这个问题吧!

css页面居中怎么设置(前端技巧css居中不确定宽度)

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;

来源:切图网 qietu.com

,