css-水平居中、垂直居中、水平垂直居中方法

css-水平居中、垂直居中、水平垂直居中方法

CSS中实现水平居中、垂直居中以及水平垂直居中的方法如下：
一、水平居中
定宽元素水平居中：
给需要居中的块级元素添加margin: 0 auto。注意块元素的宽度width值要设定。不定宽块级元素水平居中：
设置inlineblock：将父元素设置为textalign: center，子元素设置为display: inlineblock。设置flex布局：父元素设置为display: flex; justifycontent: center。二、垂直居中
单行文本垂直居中：
设置父元素的height，子元素默认垂直居中。多行文本垂直居中：
可使用display: tablecell; verticalalign: middle的方式实现。块级元素垂直居中：
flex布局：父元素设置为display: flex; alignitems: center。利用position和top和负margin：需知元素的宽高，通过计算负margin值实现。利用position和top/bottom和margin:auto：父元素设置position: relative，子元素设置position: absolute; top: 0; bottom: 0; margin: auto。利用position和top和transform：父元素设置position: relative，子元素设置position: absolute; top: 50%; transform: translateY。三、水平垂直居中
绝对定位+margin：auto：
父元素设置position: relative，子元素设置position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto。绝对定位+负margin：
需知元素的宽高，通过计算负margin值实现水平和垂直居中。绝对定位+transform：
父元素设置position: relative，子元素设置position: absolute; top: 50%; left: 50%; transform: translate。flex布局：
父元素设置为display: flex; justifycontent: center; alignitems: center。设置tablecell来实现居中：
父元素设置display: table; width: 100%; height: 100%，子元素设置display: tablecell; textalign: center; verticalalign: middle。2025-04-22