背景
在研发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是照片或其他元素
居中是一个非常基本但又是非常要紧的应用场景，实现居中的办法存在非常多，能够将这些办法分成两个大类： 居中元素（子元素）的宽高已知居中元素宽高未知实现方式
以下是10种实现元素水平垂直居中的方式： text-align:center 块状元素，水平居中(只适用于块级元素,块级元素内的行内元素能够居中或将此行内元素设置为块级元素)margin:0 auto 水平居中 以外边框为参照物，上下外边框距为0，上下外边框距浏览器会自动计算平分line-height 垂直居中 经过设置行间距。line-height只适用于单行文本的元素，多行元素不适用。float属性+relative定位 给父元素设置float：left ,而后父元素整体向左移动50%（position:relative;left:50%），此时父元素要清除浮动（clear：both）,而后再给子元素整体向左移动50%(position:relative;left:-50%)按照绝对定位absolute+margin实现水平居中 给父元素一个相对定位relative，利用绝对定位absolute，协同margin：auto自动计算外边距（position: absolute; top: 0;right: 0; bottom: 0; left: 0;margin: auto;）。相针对相对应于relative的绝对定位absolute，必须定宽。relative只是为了给子元素定位用的运用absolute绝对定位+translate 移动转换，实现水平垂直居中 运用百分比来绝对定位一个元素，并协同运用translate，将元素移动定位居中（position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)）。利用table布局，默认垂直居中（vertical-align:middle） 倘若不是table布局的话能够：仿table（display：table-cell）,同样运用vertical-align:middle实现居中对齐flex布局 父元素运用display：flex,设置其属性justify-content.align-items都为center(display: flex; justify-content: center; align-items: center),实现水平居中flex布局+margin 父元素运用flex布局（display：flex）,子元素运用margin：auto利用定位+margin:负值grid布局绝对定位+transform:translate(-50%,-50%)
.parent{
position:relative;
}
.son{
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
行内元素
基本思想：单行文本子元素line-height 值为父元素 height 值
.parent {
height: 200px;
}
.son {
line-height: 200px;
}
行内块级元素
基本思想：元素是行内块级，运用display: inline-block, vertical-align: middle+伪元素处在容器中央
.parent::after, .son{
display:inline-block;
vertical-align:middle;
}
.parent::after{
content:;
height:100%;
}
利用定位+margin:auto
先上代码：
<st
| 
发表于 2024-6-30 06:12:08
楼主