CSS--元素垂直居中注意事项

时间：2023-03-30 18:43:55 CSS

CSS元素垂直居中根据不同的情况，使用的垂直居中方式不同：块级元素和行级元素的垂直居中是不同的。1行级元素1.1行中的特殊元素如果行中包含特殊元素：图片、input输入框、inline-block元素或bold，使用verticle-align:middle;将对齐方式设置为垂直居中。text-bottom/text-top为bottom-aligned/top-alignment，兼容性好：IE41.2设置line-height，设置line-height等于高度值，可以实现行级元素的垂直居中兼容或者纯文本的块级元素IE42块级元素性能好2.1flex和align-items设置容器元素display:flex;对齐项目：居中；就是这样，里面的子元素在容器中垂直居中缺点：使用flex布局，使用CSS3的align-items属性，兼容性差：IE112.2flex和align-self设置容器元素display:flex;,子元素设置align-self:center;align-self属性允许单个项目与其他项目具有不同的对齐方式，可以覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。如果没有父元素，相当于stretch，同样兼容性差：IE112.3绝对定位父元素设置相对定位position:relative;子元素设置绝对定位position:absolute;顶部：0；左：0；底部：0；右：0；保证金：自动；关键是设置top:0;左：0；底部：0；右：0；margin:auto表示水平和垂直4两个方向的margin值计算得到兼容IE7

*{边距：0；填充：0;}.wrap{位置：相对;100vw；height:100vh;}/*注意清除margin和padding，否则100vh是错误的*/.child{position:absolute;顶部：0；底部：0；右：0；左：0；保证金：自动；宽度：200px；高度：100px；background:lightgreen;}2.4display:table-cell表格元素可以设置verticle-align:middle;实现垂直居中添加显示：table-cell；垂直对齐：中间；缺点是不能设置百分比宽度，可以设置固定的像素值兼容IE82.5绝对定位采用父元素相对定位，子元素绝对定位，子元素水平方向偏移50%direction使用负值边距来抵消其自身宽度和长度的一半。缺点是需要固定子元素的宽高。IE72.6绝对定位使用translate()属性position:absolute;顶部：50%；左：50%；中间，50%是相对于容器的宽度transform：translate(-50%,50%)是相对于元素本身的宽度，无需使用负边距值父元素设置{position:relative;}子元素设置{position:absolute;顶部：50%；左：50%；转换：翻译（-50%，50%）}