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

前言

借助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>

效果图

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

结语

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

你可能感兴趣的:(图片,图片垂直居中,图片水平居中)