实现水平垂直居中

最新推荐文章于 2023-04-03 16:21:54 发布

Forset-

最新推荐文章于 2023-04-03 16:21:54 发布

阅读量151

点赞数

文章标签： vue vue.js 前端

本文链接：https://blog.csdn.net/weixin_45236052/article/details/121590399

版权

本文详细介绍了CSS中实现元素居中布局的五种常见方法：弹性盒模型、定位属性与位移属性、Grid、line-height以及CSS-table。每种方法的代码实现、工作原理和适用场景都有所讲解，并针对PC和移动端的兼容性进行了分析。在兼容性要求较高的情况下，推荐使用absolute配合负margin或css-table方法；在无兼容性顾虑时，flex和Grid是更好的选择。

摘要由CSDN通过智能技术生成

1.弹性盒模型

父元素设置：

position：absolute；
top：0；
left:0;
right:0;
bottom:0;
margin:auto

display:flex;
justify-content:center;
align-item:center;

2.定位属性&位移属性（position&transform）

父元素设置：position：relative，

子元素设置：

//第一种
position：absolute;
top:50%;
left:50%
transform:translate(-50%,-50%)

position：absolute;
top:calc(50% - 子元素高度的一半);
left:calc(50% - 子元素宽度的一半);

第三种

绝对定位的百分比是相对于父元素的宽高，通过这个特性可以让子元素的居中显示，但绝对定位是基于子元素的左上角，外边距负值可以解决该方法的缺点，-margin 可以让元素向相反方向定位，通过子元素的外边距为子元素宽度一般的负值，可以让子元素在父级元素中水平垂直居中。
son{
position:absolute;
top:50%
left:50;
margin-left:-50%;
margin-top:-50%;
}

3.Grid

parent {
    display:grid;
}
son {
    align-self:center;
    justify-self:center;
}

4.line-height 文本垂直水平居中

父元素：

设置行高：***px
text-align:center;
font-size:0px

子元素：

若是块级元素转换为行内元素，
display:inline-block;
vertical-align:middle;
line-height:initial;

5.css-table

父元素：{
        display:table-cell;
        text-align:center;
        vertical-align:middle;
}
son:{
    displayLinline-block;
    }

PC有兼容要求，宽高固定，推荐使用absolute + （-margin）
PC有兼容要求，宽高不固定，推荐使用css-table
PC无兼容要求，推荐flex
移动端推荐使用flex

方法	居中元素定宽高固定	PC兼容性	移动端兼容性
absolute + 负margin	是	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
absolute + margin auto	是	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
absolute + calc	是	ie9+, chrome19+, firefox4+	安卓4.4+, iOS6+
absolute + transform	否	ie9+, chrome4+, firefox3.5+	安卓3+, iOS6+
writing-mode	否	ie6+, chrome4+, firefox3.5+	安卓2.3+, iOS5.1+
lineheight	否	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
table	否	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
css-table	否	ie8+, chrome4+, firefox2+	安卓2.3+, iOS6+
flex	否	ie10+, chrome4+, firefox2+	安卓2.3+, iOS6+
grid	否	ie10+, chrome57+, firefox52+	安卓6+, iOS10.3+