css居中的六个方式

CSS居中是网页设计中最基础的技能之一，有多种方法可以实现不同类型元素的居中，下面介绍最常用的6种方式。

1. 宽度已知，水平居中{
        width: 200px;
        margin: 0 auto;
}

这段代码的意思是指：元素的宽度已知，同时在左右两边分别留出相同的外边距，从而使元素居中。

2. 高度已知，垂直居中{
        height: 100px;
        line-height: 100px;
}

这段代码的意思是指：元素的高度已知，同时将元素内部文本行高设置为与元素高度相同，从而使元素垂直居中。

3. 宽高未知，利用绝对定位与负边距进行居中{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
}

这段代码的意思是指：元素的宽高未知，利用绝对定位将元素定位到页面中央，同时通过transform属性的translateX与translateY来调整元素位置，从而使元素居中。

4. 宽高未知，利用弹性盒子进行居中.wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
}
    

这段代码的意思是指：使用display: flex; 将父元素设为弹性盒子，同时通过justify-content: center; 和align-items: center; 属性将子元素水平和垂直居中。

5. 利用表格进行居中.table {
        display: table;
        margin: 0 auto;
}
.cell {
        display: table-cell;
        vertical-align: middle;
}
    

这段代码的意思是指：利用display: table; 将父元素设为表格元素，利用display: table-cell; 将子元素设为表格单元元素，同时通过vertical-align: middle; 将子元素垂直居中，再用margin: 0 auto; 将表格元素水平居中。

6. 利用网格布局进行居中.container {
        display: grid;
        place-items: center;
}
    

这段代码的意思是指：利用display: grid; 将父元素设为网格容器，通过place-items: center; 属性将子元素水平垂直居中。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！