您现在的位置是：网站首页> 编程资料编程资料

css常用元素水平垂直居中方案_CSS教程_CSS_网页制作_

2023-11-04 181人已围观

简介这篇文章主要介绍了css常用元素水平垂直居中方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

适用场景：父子宽高都可未知(比较推荐这种方式，简单，而且目前兼容性也不错。)

适用场景：父元素宽高已知未知都行，但是首先得有宽高。其次子元素的宽高必须已知，因为需要设置子元素的负margin. (也可以将负margin设置成translate来做位移实现)

适用场景：父子元素宽高都未知的情况(该方式不需要明确知道子元素宽高，子元素宽高可用百分比，对于子元素宽高不确定需要居中的情况比较适合。)

适用场景：父子元素宽高未知，兼容性不大好

适用场景: 父元素大小已知（非百分比高度），子元素大小未知，但子元素须为行内块元素，较好的兼容性

适用场景：父子宽高都可未知，子元素需为行内块元素(这种方式其实就是使用伪元素的高度为100%，子元素和伪元素都设置 vertical-align: middle实现垂直居中的效果)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。