常用的CSS水平垂直居中方法大全

bergwhite 发布于2019-08-29 12:38 / 3041人阅读

摘要：作为一名程序媛在编写页面的时候经常还会遇到水平或者垂直居中的一些布局今天正好有空就把各种居中的方式都总结了一下分享给大家希望能给大家带来帮助已知宽高背景图与背景图上的文字都水平垂直居中有宽度的水平居中有绝对定位的水平居中

作为一名程序媛
在编写页面的时候
经常还会遇到水平或者垂直居中的一些布局
今天正好有空
就把各种居中的方式都总结了一下
分享给大家
希望能给大家带来帮助

1.已知宽高背景图与背景图上的文字都水平垂直居中

.img-bg{
    position: absolute;
    background: url("http://source.kakehotels.com/kake/frontend/img/flashsales-icon.png") no-repeat;
    width: 90px;
    height: 90px;
    background-size: 100%;
    top:0;
    bottom:0;
    left:0;
    right: 0;
    margin:auto;
    line-height: 90px;
    font-size: 12px;
    color: #fff;
}

2.有宽度的div水平居中

.width-center{
    width: 300px;
    text-align: center;
    margin: 0 auto;
    background:pink;
}

3.有绝对定位的div水平居中

.position-center{
    position: absolute;
    top:0;
    bottom: 0;
    width: 300px;
    height: 300px;
    margin: auto 0;
    background: pink;
    text-align: center;
}

4.有绝对定位的div水平跟垂直都居中

.vertical-center-position{
    position: absolute;
    width: 300px;
    height: 300px;
    background: #f5f5f5;
    text-align: center;
    top:0;
    bottom:0;
    left:0;
    right: 0;
    margin:auto;
}

5.已知宽高的容器的水平垂直方向居中

.vertical-center-width{
    width: 300px;
    height: 300px;
    position: absolute;
    background: #f5f5f5;
    text-align: center;
    top:50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;
}

6.未知宽高的容器的水平垂直方向居中注：transform属性，低版本浏览器不兼容，例如IE8

.vertical-center-nowidth{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

7.水平垂直居中记得要想到flexbox此时.div无论是否已知宽高，都能两个方向居中

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

8.手机端垂直居中弹框


    
    

.popupBg{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,.8);z-index: 100;}
.popup{position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);z-index: 100;background: #FFF;}

http://www.weste.net/2014/12-...
以上就是8种常用的css水平垂直居中方法，大家可以在实际项目中加以运用，

云服务器 GPU云服务器水平垂直居中 html的水平居中垂直居中实现垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112043.html

常用的CSS水平垂直居中方法大全

摘要：作为一名程序媛在编写页面的时候经常还会遇到水平或者垂直居中的一些布局今天正好有空就把各种居中的方式都总结了一下分享给大家希望能给大家带来帮助已知宽高背景图与背景图上的文字都水平垂直居中有宽度的水平居中有绝对定位的水平居中作为一名程序媛在编写页面的时候经常还会遇到水平或者垂直居中的一些布局今天正好有空就把各种居中的方式都总结了一下分享给大家希望能给大家带来帮助 1.已知宽高背景图与背景...

muzhuyu 2019-08-01 16:53 评论0 收藏0
主流的CSS水平和垂直居中技术大全

摘要：水平居中行内元素的水平居中在父元素中设置只对内联元素或行内块元素有效需要放置于父元素中块级元素的水平居中只对块级元素有效指的是自适应宽度。参考张鑫旭实现绝对定位元素的居中及原理居中方式水平居中垂直居中块级元素设置内联元素设置。原文地址：https://www.xksblog.top/CSS-mainstream-centering-techniques.html 几个月也零零散散学...

KoreyLee 2019-08-29 16:26 评论0 收藏0
CSS居中总结大全

摘要：中居中的几种方式水平居中块级元素在块级元素中居中设置在子元素上，前提是不受影响只对行级元素有用行级元素设置浮动，或者设置定位之后。 CSS中居中的几种方式 1.水平居中margin：0 auto；块级元素在块级元素中居中设置在子元素上，前提是不受float影响 2.text-align只对行级元素有用,行级元素设置浮动，或者设置定位之后。给它的父元素设置text-aglin：cente...

Cruise_Chan 2019-08-30 15:55 评论0 收藏0
前端面试大全

摘要：一般情况下是全局对象。避免在页面的主体布局中使用，要等其中的内容完全下载之后才会显示出来，显示布局慢。对普通的网站有一个统一的思路，就是尽量向前端优化减少数据库操作减少磁盘。 HTML面试题 1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同： XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。...

dingda 2019-08-29 11:01 评论0 收藏0