CSS内容居中的几种常用方式和样式代码示例

CSS内容居中的几种常用方式和样式代码示例 第一张
CSS内容居中的几种常用方式有:text-align、margin、padding、position、display等。

text-align居中

text-align居中是最简单的居中方式,只需将父元素的text-align属性设置为center,子元素就会自动居中,如下:

.parent{
    text-align: center;
}

margin居中

margin居中是一种常用的居中方式,只需将父元素的margin属性设置为auto,子元素就会自动居中,如下:

.parent{
    margin: 0 auto;
    width: 500px;
}

padding居中

padding居中是一种可以实现居中的方式,只需将父元素的padding属性设置为auto,子元素就会自动居中,如下:

.parent{
    padding: 0 auto;
    width: 500px;
}

position居中

position居中是一种比较常用的居中方式,只需将父元素的position属性设置为relative,子元素的position属性设置为absolute,并将子元素的top和left属性设置为50%,子元素就会自动居中,如下:

.parent{
    position: relative;
    width: 500px;
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
}

display居中

display居中是一种比较灵活的居中方式,只需将父元素的display属性设置为flex,子元素的display属性设置为inline-block,并将子元素的margin属性设置为auto,子元素就会自动居中,如下:

.parent{
    display: flex;
    width: 500px;
}
.child{
    display: inline-block;
    margin: auto;
}
© 版权声明
THE END
分享