水平垂直居中的几种方式

最新推荐文章于 2025-03-27 08:54:44 发布

yujin0213

最新推荐文章于 2025-03-27 08:54:44 发布

阅读量2.4k

点赞数

分类专栏： HTML CSS 文章标签： css 水平垂直居中

本文链接：https://blog.youkuaiyun.com/yujin0213/article/details/78868336

版权

CSS 同时被 2 个专栏收录

9 篇文章

订阅专栏

HTML

3 篇文章

订阅专栏

一、flex方式（适用于居中元素元素宽高未知）

<body>
     <img src="images/myPage/avatar2.png">
</body>

html,body{
            height: 100%;
         }
     body {
            display: flex;
            align-items: center; /*垂直居中*/
            justify-content: center; /*水平居中*/
            background: #aaa;
          }

需要注意的是，要使图片在屏幕上水平垂直居中，必须设置html和body的高度为100%，否则只能实现水平居中（如下图），因为父元素的高度是子元素撑起来的

但是这种方式仅限于body里面只有一个子元素，如果body里面有多个div不行,因为flex布局里垂直水平居中设置是相对于所有子元素进行计算的，假设有两张图片
这里写图片描述

二、绝对定位和负边距（适用于居中元素的宽高是固定的）

img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -80px; /*图片宽度的一半*/
    margin-top: -80px; /*图片高度的一半*/
    }

之所以要设置负边距，是因为top,left设置的是元素左上角与body左上角的距离，要使其整个元素垂直居中就要设置负边距，分别为宽高的一半

三、CSS3的transform属性（适用于居中元素元素宽高未知）

img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 100px;
    border: 50px solid #fff;
    background: #000;
    }

translate 函数当中使用百分比是以该元素的内容区、补白(padding)、边框(border)为标准计算的，即使img元素再加一些padding和border，依然可以垂直水平居中
这里写图片描述

四、margin:auto

img{
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }