元素水平垂直居中（仅做自我总结,侵权删）

最新推荐文章于 2024-10-01 23:54:35 发布

转载最新推荐文章于 2024-10-01 23:54:35 发布 · 93 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b9b1b00e51d450e4d2fb6cf

本文详细介绍了使用CSS实现元素居中的多种方法，包括绝对定位加负边距、自动边距、calc计算、transform变换、Flexbox弹性布局、Grid网格布局等技巧，适合前端开发者学习和实践。

居中元素定宽高

1. absolute + 负margin

2. absolute + margin auto

3. absolute + salc

居中元素不定宽高

1. absolute + transform

2. text-align + vertical-align

3. writing-mode:

4. table

5. css-table

6. flex

7. grid

// absolute + 负margin
parent {
    position: relative;
}
son {
    position: absolute;
    top: 50%; // 相对于父元素的宽高
    left: 50%;
    margin-left: -{自身宽度}px;
    margin-top: -{自身高度}px;
}复制代码

// absolute + margin auto
parent {
    position: relative;
}
son {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

复制代码

// absolute + calc
parent {
    position: relative;
}
son {
    position: absolute;
    left: calc(50% - {自身宽度一半}px);
    top: calc(50% - {自身宽度一半}px);
}复制代码

// position + transform
parent {
    position: relative;
}
son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); // 自身宽高的50%
};复制代码

// textAlign+ lineHeight(行内元素给父元素设置text-align可以达到水平居中)
parent {
    text-align: center;
    line-height: {自身高度}px;
}
son {
    display: inline-block;
    line-height: {自身高度}px;

}

复制代码

// textalign + verticalAlign(lineheight+vertical垂直居中，display+textalign水平居中)
parent {
    text-align: center;
    line-height: {自身高度}px;
}
son {
    display: inline-block;
    vertical-align: middle;
    
}复制代码

// flex
parent {
    display: flex;
    justify-content: center; // 水平居中
    align-items: center; // 垂直居中
}复制代码

// grid
parent {
    display: grid;
}
son {
    justify-self: center;
    align-self: center;
}复制代码

参考资料： https://juejin.im/post/5b9a4477f265da0ad82bf921#heading-1