开启辅助访问
帐号登录 |立即注册

CSS代码实现绝对居中方法

 
1、定位法【position:absolute】

如果子级div有定义宽和高的话就可以用这个方法。注意:margin-top,和margin-left的值均为高和宽值的一半。

<style>
           div{
                   position: absolute;/* 或者使用fixed */
                   top: 50%;
                   left: 50%;
                   margin-top: -100px;
                   margin-left: -150px;
                   width: 300px;
                   height: 200px;
                   background-color: #f00;
           }
   </style>
<body>
   <div> </div>
</body>


2、使用【margin:auto】法

这个也可以是定位法。用这个方法要求子级div必须设置宽的值,不然没有效果哦~margin:auto是水平垂直都居中,如果仅仅设置水平居中,可设置为margin:auto 0;同理,如果仅仅设置垂直居中,可设置为margin:0 auto。

<style>
           div{
                   position: absolute;/* 或者使用fixed */
                   top: 0;
                   left: 0;
                   bottom: 0;
                   right: 0;
                   margin: auto;
                   width: 300px;
                   height: 200px;
                   background-color: #f00;
           }
   </style>
<body>
   <div> </div>
</body>


3、使用【display:table-cell】法

这个方法主要针对多行文字内容的垂直居中对齐。注意:text-align:center设置了文字的水平居中对齐,vertical-align:middle设置的是垂直居中对齐。

<style>
        div{
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                width: 300px;
                height: 200px;
                background-color: #f00;
                margin: auto;
        }
           
           p{
                   display: inline-block;
                   vertical-align: middle;
                   width: 150px;
                   height: 100px;
                   border: 1px solid #ccc;
                   color: #fff;
           }
   </style>
<body>
   <div>
                <p>多行文字内容,居中设置效果</p>
   </div>
</body>


4、使用【transform:translate(x,y)】法

这个是css3中的新属性,如果子级元素没有设置宽和高值的话可以用这个方法来实现。这在我们做自适应页面的时候可以用到。

<style>
        div{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
        }
   </style>
<body>
   <div>transform:translate(x,y)方法,绝对居中效果</div>
</body>


回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。