CSS 垂直居中

时间：2017-09-16 23:10:06 阅读：305 评论：0 收藏：0 [点我收藏+]

标签：垂直 tab 兼容 transform cell 解决 mic nsf sla

1、单行文本

行高和父元素的高相等即可实现垂直居中

2、多行文本

方式1：

设置父元素display：table；

设置里边的元素display：table-cell；vertical-align：middle；即可使得元素竖直居中，但是此种方式兼容性不是很好低版本的浏览器都不兼容。

方式2：

设置父元素position：relative绝对定位，并设置其子元素position：absolute相对对位，设置top：50%；left：50%；将元素的左上角定位到其父元素的中间，然后设置元素宽度以及高度一般的负值外边距移动内容即可将元素竖直居中。

.container{
    position: relative;
}
.container .content{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 120px;
    margin-left: -100px;
    margin-top: -60px;
}

方式3：

先结合绝对定位以及相对将元素的左上角定位到元素的中间，然后使用CSS3 translate将元素移动(translate后面是百分比的时候是根据元素自身的宽高来计算的)

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

方式4：

基于视口单位的解决方案：

在弹出对话框或者类似的场景下，我们希望某元素能够居中于视口中。这个时候可以使用 fixed 定位，外加上面提到的 “基于绝对定位的解决方案” 中类似的方法来实现。

此外你还有另外一种选择，那就是使用 vh 和 vw 这两个单位，100vw 就等于视口的宽度，也就是说 1vw 等于 1/100 的视口宽度，vh 也同理，1vh等于 1/100 视口的高度。因此可以写出下列代码来将一个对话框在视口中居中：

.dialog{
    position: fixed;
    margin-top: 50vh;
    margin-left: 50vw;
    transform: translate(-50%, -50%);
}

方式5：

.container{
    display: flex;
}
.container .content{
    margin: auto;
}

方式6：

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

}

CSS 垂直居中

标签：垂直 tab 兼容 transform cell 解决 mic nsf sla

原文地址：http://www.cnblogs.com/running1/p/7533150.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行