【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 ...
随机推荐
- July 06th. 2018, Week 27th. Friday
Life has no limitations, except the ones you make. 生命无限,除非你自我设限. From Les Brown. There would be no l ...
- July 05th. 2018, Week 27th. Thursday
Pleasure in the job puts perfection in the work. 乐于工作才能有完美表现. From Aristole. Do you want promotion? ...
- SUSE12SP3-Mycat(2)Schema.xml配置详解
简介 Schema.xml 作为 MyCat 中重要的配置文件之一,管理着 MyCat 的逻辑库.表.分片规则.DataNode 以及 DataSource.弄懂这些配置,是正确使用 MyCat 的前 ...
- 跟我一起学opencv 第五课之调整图像亮度和对比度
一.调整图像亮度与对比度 1.图像变换 ---像素变换-点操作 ---邻域操作-区域操作 调整图像亮度和对比度属于像素变换-点操作 公式为:g(i,j) = αf(i,j) + β 其中α>0 ...
- kubernetes 存储卷
kubernetes 存储卷 数据卷用于实现容器持久化数据,Kubernetes对于数据卷重新定义,提供了丰富强大的功能.在Kubernetes系统中,当Pod重建的时候,数据卷会丢失,Kube ...
- Linux - 通过SecureCRT的rz、sz和sftp实现文件的上传和下载
目录 1 通过rz/sz命令上传/下载 1.1 安装lrzsz软件 1.2 rz - 上传文件 1.3 sz - 下载文件 2 通过sftp上传/下载文件 2.1 关于SFTP的简介 2.2 SFTP ...
- 『集群』002 Slithice 集群配置工具 的使用
Slithice 集群配置工具 的使用 Slithice集群配置工具 主界面 在测试 Slithice 的 Demo 中,我配置了 7个服务端: 一个 WCF 的 中央服务端: 两个 WCF 的 成员 ...
- DotNetCore跨平台~在appsettings.json里自定义配置项
回到目录 DotNetCore里一切都是依赖注入的,对于appsettings这个可扩展的配置对象也不例外,它位于项目根目录,一般在startup里去注册它,在类中通过构造方法注入来获取当前的对象,以 ...
- 搞懂Redis到底快在哪里
前言 Redis是一种基于键值对(Key-Value)的NoSQL数据库,Redis的Value可以由String,hash,list,set,zset,Bitmaps,HyperLogLog等多种数 ...
- .net后台防止API接口被重复请求
思路大概是这样的: 1.获取到发出请求的客户端的IP 2.将该IP存入Cache作为KEY,将次数作为Value初始化为0,过期时间设置为1分钟 3.每次请求都将value+1,超过指定的次数后返回f ...