您的位置：首页 > Web前端 > CSS

css图片实现水平、垂直居中

2015-07-25 21:13 771 查看
一、针对图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div { width: 1000px;height: 700px ;background: #dedede;}
</style>
</head>
<body>
<div>
<img src="http://dummyimage.com/800x600/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">
</div>
</body>
</html>


方法一：已知div高度和img高度，主要控制div的padding-top

div {
width: 1000px;
height: 700px;
background: #dedede;
padding-top: 100px; //padding-top必须设置为div.height()-img.height()
}


img {
display: block;
margin: 0 auto;
}


方法二：已知div高度和img高度，主要控制img的padding-top

img {
display: block;
margin: 0 auto;
padding-top: 50px;  //(div.height()-img.height()/2
}


方法三：text-align结合padding
img {
padding-top: 50px;
}
<pre name="code" class="html">div {
position:relative;
width: 1000px;
height: 700px;
background: #dedede;
}




方法四：绝对定位结合left和top
img {
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px; //img.width()/2
margin-top: -300px;  //img.height()/2
}
div {
width: 1000px;
height: 700px;
background: #dedede;
position:relative
}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航