元素水平垂直居中的几种方法

最新推荐文章于 2024-07-18 13:51:28 发布

初漾

最新推荐文章于 2024-07-18 13:51:28 发布

阅读量4.1k

点赞数 2

分类专栏： CSS3

本文链接：https://blog.csdn.net/shuidinaozhongyan/article/details/72566021

版权

CSS3 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

一、使用flex布局实现

1.设置父盒子为弹性布局

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      html,body{
        height: 100%;
      }
      body{
        display: flex;
        justify-content: center;
        align-items: center;
      }
  </style>
</head>
<body>
     <img src="img/door1.png" alt="">
</body>
</html>

以上实现图片在屏幕上水平垂直居中。

注意：1.在屏幕上实现水平垂直居中，所以父盒子为body，必须设置父盒子的宽度，才能垂直居中，否则只能水平居中（父盒子宽度是子元素撑起来的高度）

2.必须设置html的高度也是100%，否则不起作用，不能垂直居中。

3.针对父盒子设置以上三项。其他水平垂直居中类似。

二、绝对定位法

CSS3的兴起，使得有了更好的解决方法，就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的，于是，我们可以：

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
}

注意：position和tranform是两个独立属性，不要混为一谈

三、margin:auto实现绝对定位元素的居中

.element {
    width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了这个就自动居中了 */
}

代码两个关键点：

上下左右均0位置定位；
margin: auto

于是，就居中了。上面代码的width: 600px height: 400px仅是示意，你修改为其他尺寸，或者不设置尺寸（需要是图片这种自身包含尺寸的元素），都是居中显示的。很有意思的~~

解释:

转自：http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/

可能有人会问，为何margin: auto;会让绝对定位元素居中了呢？哈哈，原因是………………

当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性就发生了，例如：

<div class="box"></div>

.box {
  position: absolute;
  left: 0; right: 0;
}

如果只有left属性或者只有right属性，则由于包裹性此时.box宽度是0。但是，在本例中，因为left/right同时存在，因此宽度就不是0，而是自适应于.box包含块的padding box宽度，也就是随着包含块padding box的宽度变化，.box的宽度也会跟着一起变。

具有流体特性绝对定位元素的margin:auto的填充规则和普通流体元素一模一样：

如果一侧定值，一侧auto，auto为剩余空间大小；
如果两侧均是auto, 则平分剩余空间；

：

例如，下面的CSS代码：

.father {
    width: 300px; height:150px;
    position: relative;
}
.son { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0;
}

此时.son这个元素的尺寸表现为“格式化宽度和格式化高度”，和<div>的“正常流宽度”一样，同属于外部尺寸，也就是尺寸自动填充父级元素的可用尺寸的，然后，此时我们给.son设置尺寸，例如：

.son { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0;
    width: 200px; height: 100px;
}

此时宽高被限制，原本应该填充的空间就被多余了出来，这多余的空间就是margin:auto计算的空间，因此，如果这时候，我们再设置一个margin:auto，那么：

.son { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0;
    width: 200px; height: 100px;
    margin: auto;
}

我们这个.son元素就水平和垂直方向同时居中了。因为，auto正好把上下左右剩余空间全部等分了，自然就居中啦！

初漾

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录