居中对齐，你了解几种

欢迎关注微信公众号【前端功成屋】分享一些前端技术、面试题、面试技巧等

绝对定位元素居中

html, body {
    height: 100%;
}

div {
    /** 已知宽高 */
    width: 100px;
    height: 100px;
    /** 通过绝对定位 top left 的 50%将元素的左上顶点位于居中 */
    position: absolute;
    top: 50%;
    left: 50%;    
    /** 通过 margin 的负值实现将元素的中心位于居中位置 */
    margin-left: -50px;                                
    margin-top: -50px;
}

.parent{
    width: 200px;
    height: 200px;
    border: 1px solid;
    position: relative;
}
.child{    
    /** 需要设置宽度 */
    width: 100px;
    height: 40px;
    /** 绝对定位使得元素定位于四个顶点 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /** 外边距设置为 auto 将元素外边距撑开，实现居中 */
    margin: auto;
}

.parent{
    width: 200px;
    height: 200px;
    border: 1px solid;
    position: relative;
}
.child{
    /** 绝对定位，设置 top left 值将元素的左上顶点位于居中位置 */
    position: absolute;
    left: 50%;
    top: 50%;
    /** 通过 css3 的平移将元素沿着 x y 轴的反方向平移 50% 使得元素中心位于居中位置 */
    transfrom: translate(-50%, -50%);
    margin: 0;
}

Flex 居中

.center {
    /** 通过 css3 的 flex 实现居中效果 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.parent{
    display: flex;
}

.child{
    margin: auto;
}

Grid 布局

.box {
    /** 通过 css3 的 grid 网格属性实现居中 */
    display: grid;
    align-items: center;
    justify-content: center;
}

.parent{
    display: grid;
}

.child{
    margin: auto;
}

希望对读完本文的你有帮助、有启发，如果有不足之处，欢迎批评指正交流！

欢迎关注微信公众号【前端功成屋】分享一些前端技术、面试题、面试技巧等

辛苦整理良久，还望手动点赞鼓励~

'摘抄'不是单纯的“粘贴->复制”，而是眼到，手到，心到的一字一句敲打下来。

声明:所有转载的文章、图片仅用于作者本人收藏学习目的，被要求或认为适当时，将标注署名与来源。若不愿某一作品被转用，请及时通知本站，本站将予以及时删除。