CSS定位“十字架”之水平垂直居中
发布时间:2016-03-02 16:52:21 作者:佚名 我要评论
这篇文章主要介绍了CSS定位“十字架”之水平垂直居中的相关资料,CSS如何定位“十字架”实现水平垂直居中效果,小编为大家解答,感兴趣的小伙伴们可以参考一下
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
本文为大家分享了CSS定位“十字架“之水平垂直居中效果的实现方法,具体内容如下
1.先看要实现的效果
实际的效果图
可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中,然后再父级的div中定位出两个十字架的div。
看实现代码:
XML/HTML Code复制内容到剪贴板
- <html>
- <head>
- <title></title>
- <style>
- body{margin:0;padding:0}
- /*定位父级div水平垂直居中*/
- .body_main{
- width:200px;
- height: 300px;
- background-color: #3091E5;
- margin:-150px 0 0 -100px;
- top:50%;
- left:50%;
- position: absolute;
- }
- /*定位水平div垂直居中*/
- .row_div{
- width:200px;
- height: 50px;
- background-color:#88E500;
- position: absolute;
- top:50%;
- margin:-25px 0 0 0;
- }
- /*定位列div水平居中*/
- .clou_div{
- width:50px;
- height: 300px;
- background-color: #3c510c;
- left:50%;
- position: absolute;
- margin:0 0 0 -25px;
- }
- </style>
- </head>
- <body>
- <div class="body_main">
- <div class="row_div">横向的div</div>
- <div class="clou_div">竖直的div</div>
- </div>
- </body>
- </html>
div默认的宽度是100%,当div绝对定位以后,其宽度是按照div中内容的宽度。
总结:
css中的绝对定位是相对于最近已定位的祖先元素进行定位,如果元素没有已经定位的祖先元素,那么位置相对于初始的包含块进行定位。
以上就是本文的全部内容,希望对大家的学习有所帮助。
相关文章
- 这篇文章给大家介绍了三个小节的内容,其中包括关于css3中flexbox需要掌握的概念、flexbox实现水平垂直居中对齐和三列等高自适应页脚区域黏附底部的布局,有需要的可以参考2016-09-12
- 下面小编就为大家带来一篇Flexbox制作CSS布局实现水平垂直居中的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-07-27
- 下面小编就为大家带来一篇浅析CSS实现水平垂直同时居中的5种思路。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧2016-04-28
- 下面小编就为大家带来一篇让DIV水平垂直居中的两种完美方法推荐。一起跟随小编过来看看吧。希望给大家一个参考2016-03-15
- 这篇文章主要介绍了CSS解决页面图片水平垂直居中问题的方法,文中给出了三种方案而无需依赖JavaScript,需要的朋友可以参考下2016-03-10
- 这篇文章主要介绍了使用CSS实现水平垂直居中效果的方法的总结,涵盖了从最原始的高度设置到令人兴奋的CSS3的Flexbox方式,非常全面,十分推荐!需要的朋友可以参考下2016-03-10
- 这篇文章主要针对HTML对于元素水平垂直居中进行的探讨,对元素水平垂直居中操作进行讲解,感兴趣的小伙伴们可以参考一下2016-02-24
- 本文是小编日常遇到的关于html水平垂直居中的一些问题小结,特此分享在脚本之家网站供大家参考2015-11-18
- 这篇文章主要介绍了DIV或者DIV里面的图片水平与垂直居中的方法,需要的朋友可以参考下2018-11-15
最新评论