让一个元素水平垂直居中的四种方法

最新推荐文章于 2021-02-02 13:57:02 发布

diaoxia7328

最新推荐文章于 2021-02-02 13:57:02 发布

阅读量387

点赞数

原文链接：http://www.cnblogs.com/web-record/p/9144701.html

版权

第一种方法:

div.box{

weight:200px;

height:400px;

<!--把元素变成定位元素-->

position:absolute;

<!--设置元素的定位位置，距离上、左都为50%-->

left:50%;

top:50%;

<!--设置元素的左外边距、上外边距为宽高的负1/2-->

margin-left:-100px;

margin-top:-200px;

}

兼容性好;缺点:必须知道元素的宽高

第二种方法：

div.box{

weight:200px;

height:400px;

<!--把元素变成定位元素-->

position:absolute;

<!--设置元素的定位位置，距离上、左都为50%-->

left:50%;

top:50%;

<!--设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)-->

transform:translate(-50%,-50%);

}

这是css3里的样式;缺点:兼容性不好，只支持IE9+的浏览器

第三种方法

div.box{

weight:200px;

height:400px;

<!--把元素变成定位元素-->

position:absolute;

<!--设置元素的定位位置，距离上、下、左、右都为0-->

left:0;

right:0;

top:0;

bottom:0;

<!--设置元素的margin样式值为 auto-->

margin:auto;

}

兼容性较好，缺点:不支持IE7以下的浏览器
第四种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            width: 600px;
            height: 800px;
            background-color: blue;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .child1{
            width:200px;
            height:200px;
            background-color: red;
        }
        
    </style>
</head>
<body>
    <div class="container clearFix">
        <div class="child1">child1</div>
    </div>
</body>
</html>

缺点:兼容性不好，使用记得加前缀

转载于:https://www.cnblogs.com/web-record/p/9144701.html

diaoxia7328

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
让一个元素水平垂直居中的四种方法

第一种方法:div.box{weight:200px;height:400px;position:absolute;left:50%;top:50%;margin-left...
复制链接

扫一扫