网页元素居中攻略记_(6)图片水平垂直居中

来源：互联网发布：微信广告植入系统源码编辑：程序博客网时间：2024/06/05 19:11

前言

借助table的特性来实现

代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css" media="screen">        .test{            display:table;            height:800px;            width:800px;            background:#99cc99;            border-radius:5px;            border:1px solid #f70;        }        .test>span{            display:table-cell;            vertical-align:middle;            text-align:center;        }        .test>span>img{            height:400px;            width:400px;            border-radius:50%;            box-shadow:1px 1px 3px rgba(0,0,0,.5);        }    </style></head><body>    <div class="test">        <span><img src="http://d.hiphotos.baidu.com/image/h%3D200/sign=8663264274f082023292963f7bfbfb8a/f3d3572c11dfa9eca13b947665d0f703918fc1be.jpg" alt=""></span>    </div></body></html>

效果图

这里写图片描述

结语

用position来定位也可以…这里只是展示另一种图片居中的方式,,感觉相当方便

1 0