首页 > 代码库 > 任意大小的图片垂直水平居中与一个固定大小的容器中

任意大小的图片垂直水平居中与一个固定大小的容器中

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>无标题文档</title><style type="text/css">*{ margin:0; padding:0;}.fl{ float:left; width:100px; height:100px; background:green}.nofl{ width:300px; height:300px; background:red; margin:100px auto; position:relative; overflow:hidden;}.nofl p{ position:absolute; left:50%; top:50%;}.nofl p img{ position:absolute; left:-50%; top:-50%;}.nofl p .hide{ position:static; visibility:hidden;}</style></head><body><div class="nofl">    <p>        <img src="02.png" class="hide" />       <a href="#"><img src="02.png" /></a>    </p></div></body></html>

实际效果如下: