100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 5种div 内容水平垂直居中方法

5种div 内容水平垂直居中方法

时间:2021-06-13 13:19:10

相关推荐

5种div 内容水平垂直居中方法

以下是五种让 div 中的内容水平垂直居中的方法:

使用 Flex 布局

使用 Flex 布局是让 div 中的内容水平垂直居中的最常见方法,可以使用以下样式实现:

.container {display: flex;justify-content: center;align-items: center;}

以上样式会将container容器中的内容水平、垂直居中。

使用绝对定位

使用绝对定位也可以实现 div 中内容的水平垂直居中,可以使用以下样式实现:

.container {position: relative;}.content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

以上样式会将content容器中的内容水平、垂直居中。

使用 table-cell

使用 table-cell 也可以实现 div 中内容的水平垂直居中,可以使用以下样式实现:

.container {display: table-cell;text-align: center;vertical-align: middle;}

以上样式会将container容器中的内容水平、垂直居中。

使用 Grid 布局

使用 Grid 布局也可以实现 div 中内容的水平垂直居中,可以使用以下样式实现:

.container {display: grid;place-items: center;}

以上样式会将container容器中的内容水平、垂直居中。

使用 line-height

使用 line-height 属性也可以实现 div 中内容的水平垂直居中,可以使用以下样式实现:

.container {line-height: 100px; /* 修改此处的值为 div 的高度 */text-align: center;}

以上样式会将container容器中的内容水平、垂直居中。

以上五种方法都能实现 div 中内容的水平垂直居中,具体使用哪种方法可以根据具体的项目需求和适用场景来决定。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。