水平垂直居中的几种方式

一、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%,否则只能实现水平居中(如下图),因为父元素的高度是子元素撑起来的
水平垂直居中的几种方式_第1张图片

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

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

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

之所以要设置负边距,是因为top,left设置的是元素左上角与body左上角的距离,要使其整个元素垂直居中就要设置负边距,分别为宽高的一半
水平垂直居中的几种方式_第3张图片

三、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,依然可以垂直水平居中
水平垂直居中的几种方式_第4张图片

四、margin:auto

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

你可能感兴趣的:(HTML,CSS)