码迷,mamicode.com
首页 > 其他好文 > 详细

div中div水平垂直居中

时间:2017-06-15 14:06:34      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:splay   width   blog   code   div   style   absolute   属性   class   

方法1:水平:margin:0 auto;

  垂直:使用定位属性,小的div在大的div中分别绝对定位为:left:50%;top:50%,然后再添加margin-left\top属性,值为负的小div的宽高的一半

            .parent {
                width: 500px;
                height: 500px;
                border: 1px solid red;
                position: relative;
                
            }
            
            .child{
                width: 100px;
                height: 100px;
                border: 1px solid darkgreen;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -50px;
                margin-top: -50px;
            }

方法2:table cell:

            .parent {
                width: 500px;
                height: 500px;
                border: 1px solid red;
                display: table-cell;
                vertical-align: middle;
            }
            
            .chlid{
                width: 100px;
                height: 100px;
                border: 1px solid darkgreen;
                margin: 0 auto;
            }

 

div中div水平垂直居中

标签:splay   width   blog   code   div   style   absolute   属性   class   

原文地址:http://www.cnblogs.com/rlann/p/7016925.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!