html-css系列-图片上下居中
时间：2023-03-31 12:39:56
CSS
本文详情：http://www.zymseo.com/276.html图片上下居中问题的几种常用方法：knownsizeandunknownsizeofof图片，自己看懂。main{width:400px;height:400px;边框：实心1px红色；文本对齐：居中；}
下图为实际状态和结束状态：方法一：diaplay:table-cellunitformdisplay:table-cell;垂直对齐：中间；方法二：flex;align-items:center;justify-content:center弹框布局display:flex;align-items:center;justify-content:center;方法三：positionplusmarginposition:relative;margin:auto;position:absolute;left:0;right:0;top:0;bottom:0;方法四：positionplustransformposition:relative;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);方法五：纯positionposition:relative;position:absolute;left:50%;top:50%;margin-left:-50px;margin-top:-50px;
