CSS中实现垂直居中的3种方法

html/css 2023-06-14 263次浏览

前言

CSS垂直居中是指在一个容器中,让其中的某个子元素垂直居中显示。比如在一个div容器中,我们要让其中的文本内容垂直居中,则可以采用各种CSS技巧来实现这一目标。

实现垂直居中需要考虑的方面比较多,例如要考虑文本的行高、字体大小、文本的长度是否超过容器等等。然而,我们可以采用一些CSS技术(如flexbox布局、vertical-align属性、绝对定位等)来实现垂直居中。

以下列出一些比较常见的方式:

1. 使用flexbox布局

在父容器上添加display: flex和align-items: center属性,即可将子元素垂直居中。

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

.item {
    width: 50%;
}

2. 使用table-cell实现

将父容器的display属性设置为table,将要居中的子元素的display属性设置为table-cell,然后设置垂直居中即可。

.container {
    display: table;
    height: 100vh;
}

.item {
    display: table-cell;
    vertical-align: middle;
}

3. 绝对定位和transform属性

将要居中的子元素设置为绝对定位,然后将top和left两个位置属性都设置为50%,再使用transform属性将子元素向上或向左偏移自身高度(或宽度)的一半,即可实现垂直或水平居中。

.container {
    position: relative;
    height: 100vh;
}

.item {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

结语

以上是一些实现CSS垂直居中的方法,具体选择哪种方法,大家可以根据自己的使用场景和业务来决定。

CSS中实现垂直居中的3种方法

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址