前端布局之——水平垂直居中
发布网友
发布时间：2024-09-15 07:28
共1个回答
热心网友
时间：2024-11-02 17:53
水平居中方法：
法一：行内元素水平居中
法二：使用margin实现水平居中
法三：采用flex弹性布局实现多个块级元素水平居中
垂直居中方法：
法一：行内元素垂直居中
法二：通过padding实现垂直居中
法三：利用vertical-align属性实现垂直居中
法四：使用flex布局实现垂直居中
法五：放置全高度的伪元素并设置文本垂直对齐
法六：使用绝对定位实现垂直居中（元素高度已知）
法七：使用绝对定位和transform实现垂直居中（元素高度未知）
法八：使用flex布局的flex-direction: column;实现垂直居中
水平垂直居中方法：
法一：行内元素text-align搭配line-height实现水平垂直居中
法二：使用绝对定位实现水平垂直居中（需要知道子元素的宽高）
法三：使用绝对定位实现水平垂直居中（不需要知道子元素的宽高）
法四：通过父元素使用display: table和子元素使用vertical-align: middle实现水平垂直居中
法五：借助伪元素实现水平垂直居中（需要知道父元素的高度）
法六：使用父元素display: table和子元素vertical-align: middle实现水平垂直居中（水平居中采用margin）
法七：使用table-cell嵌套两层实现水平垂直居中
法八：使用绝对定位和四边定位为0，margin为auto实现水平垂直居中（子元素高度未知时无效）
法九：使用flex布局实现水平垂直居中
法十：利用grid布局，将容器划分为3x3栅格，第二行第二列格子实现垂直水平居中
法十一：利用flex或grid布局结合margin: auto;实现水平垂直居中
