水平垂直居中的几种方式

来源：互联网发布：apache tomcat 6镜像编辑：程序博客网时间：2024/05/20 18:53

一、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;    }

阅读全文

0 0