网页元素居中攻略记_(5)未知宽高元素绝对居中

最新推荐文章于 2023-07-29 10:45:37 发布

原创最新推荐文章于 2023-07-29 10:45:37 发布 · 3.3k 阅读

CC 4.0 BY-SA版权

文章标签：

29 篇文章

订阅专栏

6 篇文章

订阅专栏

本文详细介绍了如何利用CSS3的transform属性和Flexbox布局实现网页元素的自适应居中，避免了传统方法的局限性。包括传统绝对居中的方法、新型绝对居中方法及移动端布局的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以前,我们要自适应全局居中,需要借助JS或者JQ来实现,

现在有了CSS3就可以省去好多功夫了,为什么这么说!!

	#container{
		position:abosolute;
		top:50%;
		left:50%;
		margin-left:-包含块宽度的一半(如 -300px );
		margin-top: -包含块高度的一半;
	}

这种是实现了包含块的绝对居中,但是有一个问题,就是宽高度无法自适应(需固定宽高)。
比如动态增加数据的时候,用这个就不大合适了，这时候折中的办法就是借助JS或者JQ来解决

(需要较新浏览器,用了一个CSS3的属性)
属性的名字:transform:translate(支持IE9+,其他浏览器基本都支持了);

	#container{
	  position: absolute; // 会找到最近的一个position:relative父类进行偏移
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	}

下面我们来分析这句话transform: translate(-50%, -50%);;
意思就是说,拉回调用该属性的元素的一半宽高;

transform:translate有三种写法,我写的那种包含X,Y的,第一个参数是针对X轴左右拉动,第二个是针对Y轴上下拉动

另外两种参数写法:

使用了该属性后,就可以实现未知宽高自适应绝对居中了!!!是不是很赞!!!

移动端用的比较多，因为移动端对这个的支持比较友好；

#container{
   display:flex;
   justify-content:center;
   align-items:center;
}