CSS代码实现绝对居中方法

admin · 2023-3-30 21:45:07

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>

		自动登录	找回密码
密码			立即注册

CSS代码实现绝对居中方法

0 个回复

快速回复

admin

楼主热帖

相关帖子

标签云

艾Q网