【css】图片垂直水平居中
一、已知宽高的图片实现垂直水平居中
1.借助margin-top负边距实现垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在已知图片高度的情况下借助margin-top负边距实现垂直居中</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
.wrap{
position:relative;
width:500px;
height:500px;
text-align:center;
border:1px solid #e64c65;
}
img{
position:absolute;
top:50%;
height:88px;
left:0;
right:0;
margin:auto;
margin-top:-44px; }
</style>
</head>
<body>
<div class="wrap">
<img src="girl.jpg" alt=""/>
</div>
</body>
</html>
2.借助额外的块级元素实现垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在已知图片高度的情况下借助额外的块级元素实现垂直居中</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
.wrap{
width:500px;
height:500px;
text-align:center;
border:1px solid #e64c65;
}
.temp{
height:50%;
margin-bottom:-44px;
}
img{
height:88px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="temp"></div>
<img src="girl.jpg" alt=""/>
</div>
</body>
</html>
二、未知宽高的图片实现垂直水平居中
1.利用line-height 和 vertical-align:middle实现垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用line-height 和 vertical-align:middle实现垂直居中</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
.wrap{
width:500px;
height:500px;
text-align: center;
line-height:500px;
border:1px solid #e64c65;
margin:100px auto; }
img{
vertical-align: middle;
}
</style>
</head>
<body>
<div class="wrap">
<img src="girl.jpg" alt=""/>
</div>
</body>
</html>
2.借助高度100%的一个标签，原理vertical-align属性的特性实现垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>借助高度100%的一个标签，原理vertical-align属性的特性实现垂直居中</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
.wrap{
width:500px;
height:500px;
text-align: center;
border:1px solid #e64c65;
}
img{
vertical-align: middle;
}
span{
display: inline-block;
height:100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="wrap">
<img src="girl.jpg" alt=""/>
<span></span>
</div>
</body>
</html>
3.利用after伪类实现垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用after伪类实现垂直居中</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
.wrap{
width:500px;
height:500px;
text-align:center;
border:1px solid #e64c65;
}
.wrap::after{
display:inline-block;
content:'';
height:100%;
vertical-align: middle;
}
img{
vertical-align: middle;
}
</style>
</head>
<body>
<div class="wrap">
<img src="girl.jpg" alt=""/>
</div>
</body>
</html>
4.利用table-cell实现垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用table-cell实现垂直居中</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
.wrap{
display:table-cell;
width:500px;
height:500px;
font-size:0;
vertical-align: middle;
text-align: center;
border:1px solid #e64c65;
}
</style>
</head>
<body>
<div class="wrap">
<img src="girl.jpg" alt=""/>
</div>
</body>
</html>
5.利用flex弹性布局实现垂直居中实现垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用flex弹性布局实现垂直居中实现垂直居中</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
.wrap{
width:500px;
height:500px;
display: flex;
justify-content: center;
align-items: center;
border:1px solid #e64c65;
}
</style>
</head>
<body>
<div class="wrap">
<img src="girl.jpg" alt=""/>
</div>
</body>
</html>
6.利用绝对定位实现垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>未知图片高度的情况下借助绝对定位实现垂直居中</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
.wrap{
position:relative;
width:500px;
height:500px;
border:1px solid #e64c65;
}
img{
position:absolute;
top:0;
; bottom:0;
left:0;
right:0;
margin:auto;
}
</style>
</head>
<body>
<div class="wrap">
<img src="girl.jpg" alt=""/>
</div>
</body>
</html>
7.利用绝对定位+transform实现垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>未知图片高度的情况下借助绝对定位+transform实现垂直居中</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
.wrap{
position:relative;
width:500px;
height:500px;
border:1px solid #e64c65;
}
img{
left: 50%;
top: 50%;
position: absolute;
-webkit-transform: translate3D(-50%,-50%,0);
-ms-transform: translate3D(-50%,-50%,0);
-moz-transform: translate3D(-50%,-50%,0);
-o-transform: translate3D(-50%,-50%,0);
transform: translate3D(-50%,-50%,0);
}
</style>
</head>
<body>
<div class="wrap">
<img src="girl.jpg" alt=""/>
</div>
</body>
</html>
效果：
作者：smile.轉角
QQ：493177502
【css】图片垂直水平居中的更多相关文章
- css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法？）
实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...
- 关于用css实现文本和图片垂直水平居中
关于用css实现文本和图片垂直水平居中 一直相信好记性不如烂笔头,最近遇到很多用到垂直居中的,整理一下以便日后查阅. 一.文本垂直水平居中 1.水平居中: 文字水平居中没什么好说的,用text-a ...
- css实现垂直水平居中的方法（个数不限）？
方法一:使用绝对定位 大家都知道margin:0 auto;能够实现水平居中,但却不知道margin:0 auto;也是可以实现垂直居中的: 给居中元素添加如下样式: .Absolute-Center ...
- css实现垂直水平居中的5种方法
css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...
- css图片居中(水平居中和垂直居中)
css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 ...
- CSS之垂直水平居中的背后
最开始,我想说,这个体系有点大,我写的并不好.就当作是一个思路吧,虽然这个思路有点乱.几乎每一个实现方案的背后都是该属性及其组合的原理,每一个都要剖析其规范细节的话,这篇文章绝不会是这样的篇幅,所以每 ...
- css文本垂直水平居中
一.单行文本居中 .content{ height:100px; line-height:100px; text-align:center; border:1px solid red; } 效果图 二 ...
- CSS实现垂直水平居中
HTML结构: <div class="wrapper"> <div class="content"></div> < ...
- Css实现垂直水平居中的六种方法
经常在项目中用到,今天总结了一下: 演示地址:http://codepen.io/anon/pen/xGdpOa 以下两个类为公共类,便于更好的显示效果,非核心代码 .common{ width: 6 ...
随机推荐
- June 30th. 2018, Week 26th. Saturday
Curiosity is the wick in the candle of learning. 如果学习是一根蜡烛,那好奇心就是烛芯. From William Arthur Ward. Pleas ...
- pyspider 文档介绍
一 代码区结构 def on_start(self)是脚本的入口点.单击run仪表板上的按钮时将调用它. self.crawl(url, callback=self.index_page)*是这里最重 ...
- C# 接口《通俗解释》
接口 为什么要用接口?好处在哪里? 如果你的工作是一个修水管的,一天客户找上你让你帮装水管,但是有个要求,就是客户喜欢管子是三角形的. 你立马买了三角形的水管回来,在墙上弄个三角形的口子,客户付了钱, ...
- Quartz实现分布式可动态配置的定时任务
关键词: 1. 定时任务 2. 分布式 3. 可动态配置触发时间 一般通过Quartz实现定时任务很简单.如果实现分布式定时任务需要结合分布式框架选择master节点触发也可以实现.但我们有个实际需求 ...
- Spring Cloud Eureka 注册中心集群搭建，Greenwich 最新版！
Spring Cloud 的注册中心可以由 Eureka.Consul.Zookeeper.ETCD 等来实现,这里推荐使用 Spring Cloud Eureka 来实现注册中心,它基于 Netfl ...
- Base64编码的原理
Base64是一种基于64个可打印字符来表示二进制数据的表示方法.由于 2的6次方是64,所以每6个比特为一个单元,对应某个可打印字符.3个字节有24个比特,对应于4个Base64单元,即3个字节可由 ...
- linux 下搭建php环境
linux 下搭建php环境 1.下载apache (http://httpd.apache.org/download.cgi) 下载php组件 ( http://cn2.php.net/get/ph ...
- redis的string类型！！！！
value的最大存储量为512m,可储存图像数据或json数据等 1.redis的增加操作 127.0.0.1:6379> set name China --返回ok,说明增加成功,若n ...
- Tomcat的测试网页换成自己项目首页
<Host name="localhost" appBase="webapps" unpackWARs="true" autoDepl ...
- RecyclerSwipeAdapterDemo【使用AndroidSwipeLayout用于列表项侧滑功能】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 记录AndroidSwipeLayout搭配Recyclerview实现列表项侧滑功能. 效果图 代码分析 适配器类中设置Swipe ...