2024年5月21日发(作者：)
css实现垂直水平居中的方法
在CSS中，要实现元素的水平居中和垂直居中，有多种方法可以
选择。下面将介绍一些实现这两种居中方式的常用技巧。
一、水平居中
要实现元素的水平居中，可以使用以下方法：
1.1 text-align: center
通过将父元素的text-align属性设置为center，可以将其内部的
行内元素水平居中。这个方法适用于行内元素和行内块元素。
1.2 margin: auto
通过将父元素设为块级元素，并将其左右外边距都设置为auto，
可以实现水平居中。这个方法适用于块级元素。
1.3 display: flex
通过将父元素的display属性设置为flex，并使用属性justify-
content: center，可以实现其内部元素的水平居中。这个方法适用于
块级元素。
1.4 position: absolute + left: 50% + transform:
translateX(-50%)
通过将要居中的元素设置为绝对定位（position: absolute），
然后通过设置左侧偏移量为50%（left: 50%），再使用transform属
性将其平移回左侧偏移量的50%（transform: translateX(-50%)），
可以实现水平居中。这个方法适用于任何元素。
二、垂直居中
要实现元素的垂直居中，可以使用以下方法：
2.1 line-height:父元素的高度值
通过将父元素设为块级元素，然后将其line-height属性设置为
与自身高度相等的值，可以实现内部元素的垂直居中。这个方法适用
于行内元素和行内块元素。
2.2 display: table + display: table-cell + vertical-align:
middle
通过将父元素的display属性设置为table，再将内部元素的
display属性设置为table-cell，并且设置vertical-align属性为
middle，可以实现垂直居中。这个方法适用于块级元素。
2.3 position: absolute + top: 50% + transform:
translateY(-50%)
通过将要居中的元素设置为绝对定位（position: absolute），
然后通过设置顶部偏移量为50%（top: 50%），再使用transform属性
将其平移回顶部偏移量的50%（transform: translateY(-50%)），可
以实现垂直居中。这个方法适用于任何元素。
2.4 display: flex
通过将父元素的display属性设置为flex，并使用属性align-
items: center，可以实现其内部元素的垂直居中。这个方法适用于块
级元素。
三、垂直水平居中
如果要同时实现元素的垂直居中和水平居中，可以综合运用前面
介绍的方法，以下是两种常用的实现方式：
3.1 position: absolute + top: 50% + left: 50% + transform:
translate(-50%, -50%)
通过将要居中的元素设置为绝对定位（position: absolute），
然后通过设置顶部和左侧的偏移量为50%（top: 50%和left: 50%），
最后使用transform属性将其平移回各自偏移量的50%（transform:
translate(-50%, -50%)），可以实现垂直水平居中。这个方法适用于
任何元素。
3.2 display: flex + justify-content: center + align-items:
center
通过将父元素的display属性设置为flex，并使用属性justify-
content: center和align-items: center，可以实现其内部元素的垂
直居中和水平居中。这个方法适用于块级元素。
以上介绍的方法都是常见的实现垂直水平居中的技巧，在具体应
用中可以选择适合自己场景的方式进行使用。通过灵活运用这些方法，
可以轻松实现元素的垂直水平居中效果。
发布者：admin，转转请注明出处：http://www.yc00.com/news/1716278093a2727059.html
评论列表（0条）