四时宝库

程序员的知识宝库

自己总结下web移动端图片垂直居中的方法

1、移动端图片垂直居中

利用height与line-height相等:类似文字垂直居中的方法,这里图片就需要吧font-size设置为0;

这种在图片宽高不同的时候任然可以居中;

如果给一个div容器设置width:100%;height:100%;background:#ff0000;这时候如果不加position:absolute或者position:fixed;这个容器是不会显示的;

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

*{

margin:0;

padding:0;

}

div{

width:100%;

margin-top: 0px;

height: 667px;

line-height: 667px;

font-size: 0;

text-align: center;

background-color: #A2A590;

}

div img{

width:100%;

vertical-align: middle;

}

</style>

</head>

<body>

<div>

<img src="1.png" alt="logo" id="logo" />

</div>

</body>

</html>


2、利用父容器和子容器的相对绝对定位;这种对于图片垂直居中感觉还有点不适用;这种在图片宽高不同的时候不行;

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

*{

margin:0;

padding:0;

}

.parent{

width:375px;

height:667px;

overflow: hidden;

background:red;

position:relative;

}

.child{

background:#ccc;

height:100px;

width:100px;

margin: auto;

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

}

</style>

</head>

<body>

<div class="parent">

<div class="child"></div>

</div>

</body>

</html>

当居中的元素固定宽高,也可以这样写:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

*{

margin:0;

padding:0;

}

.part{

width:100%;

height:100%;

overflow: hidden;

background:red;

position:fixed;

top:0;

}

.box1{

background:#ccc;

height:100px;

width:100px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -50px;

margin-top:-50px;

}

</style>

</head>

<body>

<div class="parent">

<div class="child"></div>

</div>

</body>

</html>

3、这种用的是table-cell,对于图片宽高不知道的是可以的,

这种方法很简单,有的地方说需要加一个<i>的额外标签,

如果页面需要一两个居中的图片,那此方法是可推荐,

但如果很多个产品的图,那就换个方法;

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

*{

margin:0;

padding:0;

}

.qq {

width:375px;

display:table-cell;

height:667px;

text-align:center;

vertical-align:middle;

}

i {

display:inline-block;

height:100%;

vertical-align:middle

}

.qq img {

width: 100%;

vertical-align:middle;

}

</style>

</head>

<body>

<div><i></i><img src="http://www.baidu.com/img/baidu_logo.gif" /></div>

</body>

</html>

4、背景法:这个确实简单;

<style type="text/css">

* {margin:0;padding:0;}

div {

width:500px;border:1px solid #f00;

height:500px;

background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat

}

</style>

<div>

</div>

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接