grid布局垂直居中（grid布局兼容）



元素水平垂直居中

• 设置两个盒子，关系是父子：父元素

方法一：同宽高+padding

• 将父元素的width和height设置的和子元素的大小一样，然后设置父元素parent的padding。此时padding会将子元素挤进父元素的中间位置；
• 此时父、子元素的定位是否开启都可以；

 代码运行截图

方法二：absolute + margin:auto

• 父元素相对定位，子元素绝对定位；
• 绝对定位盒子模型有个特点：left+right+width+padding+margin=包含块的宽度；所以此时可以将left、right（默认值为auto，所以需要重设置）设置为0，而padding已经确定（未设置时默认值为0px），所以剩下的都是margin，但是margin的默认值是0px。所以就将magin设为auto，使得元素自动居中了；
• 即：left、right、top、bottom为0；margin为auto;

运行截图

方法三：absolute + 负margin（或transform）

• 父相对子绝对，上下为50%，margin设为负
• 强大的absolute对于这种小问题当然也是很简单的；
• 绝对定位脱离文档流，不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度。
• 父元素相对定位，子元素绝对定位；
• 将子元素left和right直接设为50%，相对的是父元素；
• 然后再使用margin-left和margin-top设为子元素的一半的负数。就是将偏离父元素中心的那段拽回来；

• 如果不知道子元素的宽和高，则使用transfrom:translate3d(-50% -50% )；
  • transform 为 CSS3 属性，有兼容性问题；

• 但是这种方法，当在需要做3d变换的元素上不能使用，前后会有所影响；

方法四：inline-block+table-cell

• 兼容性好

方法五：flex布局

• 只需设置父节点属性，无需设置子元素
• 兼容性问题

文字元素的垂直水平居中 

• 设置行高和text-align：

• flex布局

单方面的水平居中或者垂直居中布局，都可以按照上面的方法来实现 

网格（Grid）布局：

应用场景：实现复杂的网格化布局，例如实现产品展示页面、图文混排等。

实操实践：

5. 响应式布局：

应用场景：根据不同设备的屏幕尺寸调整布局，以提供更好的用户体验。

实操实践：使用媒体查询（Media Queries）来应对不同的屏幕尺寸。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rfx/75202.html