css居中

简介: 转自:How to Center Anything With CSS  http://designshack.net/articles/css/how-to-center-anything-with-css 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 http://blog.

转自:How to Center Anything With CSS 

http://designshack.net/articles/css/how-to-center-anything-with-css

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

http://blog.csdn.net/freshlover/article/details/11579669

div.showBox
        {
            position: fixed;//①
            z-index: 999; //②
            padding: 0px; 
          
           
            border: 4px solid rgba(0,0,0,0.1);
            border-radius: 5px;            
            
           
           
            margin: 0 auto; //③
            margin-top: 34.5px;            
            width: 696px; //④
            height: 441px;
             
           left:0px;right:0px;//⑤
            
        }

 注:指定宽度和margin:0 auto就可以居中了。

但是本文要实现的是类似于弹框的水平居中,所以追加了z-index,z-index生效需要追加position。

到此,预览。。。。我去,水平居中失败。。。。原因嘛,不知道,蛋疼了啊。。。

然后各种百度。。。然后追加 上⑤就能居中了。。。原因不明,我去

相关文章
|
前端开发 容器
我已经说了5种css居中实现的方式了,面试官竟然说还不够?
这是一篇关于居中对齐方式的总结 开篇之前,先问一下大家都知道几种居中的实现方式? 面试时答出来两三个就不错了,就怕面试官还让你继续说。今天就来总结一下这些居中的方式 使用flex布局设置居中。 使用flex 时也能通过给子项设置margin: auto实现居中。 使用绝对定位的方式实现水平垂直居中。 使用grid设置居中。 使用grid时还能通过给子项设置margin: auto实现居中。 使用tabel-cell实现垂直居中。 还有一种不常用的方法实现垂直居中。 最后还有一种奇葩的方法。容器设置position: relative。孩子设置 top、left、bottom、right都设
206 0
我已经说了5种css居中实现的方式了,面试官竟然说还不够?
|
前端开发
CSS水平居中+垂直居中+水平/垂直居中的方法总结
CSS水平居中+垂直居中+水平/垂直居中的方法总结
247 0
CSS水平居中+垂直居中+水平/垂直居中的方法总结
|
前端开发
【前端】【样式】CSS居中的三种方式
【前端】【样式】CSS居中的三种方式
107 1
|
前端开发 开发者 容器
CSS 居中总结 | 学习笔记
快速学习 CSS 居中总结
CSS 居中总结 | 学习笔记
|
前端开发
CSS的垂直居中和水平居中总结
CSS的垂直居中和水平居中总结
142 0
html+css实战153-定位-居中
html+css实战153-定位-居中
97 0
html+css实战153-定位-居中
ADI
[记录] CSS-不定宽高水平居中
[记录] CSS-不定宽高水平居中
ADI
109 0
html+css实战155-位移-居中
html+css实战155-位移-居中
112 0
html+css实战154-位移-居中
html+css实战154-位移-居中
163 0
html+css实战106-版心居中
html+css实战106-版心居中
317 0