【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 ...
随机推荐
- 初试PySnooper
Pysooper是什么? 我们写代码会经常出现bug,有的人会使用断点调试器,但是设置这样的断点调试器是花时间的. 所以很多人会在可能出现错误的地方print打印来输出语句. Pysooper的作用有 ...
- 消费阿里云日志服务SLS
此文档只关心消费接入,不关心日志接入,只关心消费如何接入,可直接跳转到[sdk消费接入] SLS简介 日志服务: 日志服务(Log Service,简称 LOG)是针对日志类数据的一站式服务,在阿里巴 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- 【TensorFlow篇】--Tensorflow框架初始，实现机器学习中多元线性回归
一.前述 TensorFlow是谷歌基于DistBelief进行研发的第二代人工智能学习系统,其命名来源于本身的运行原理.Tensor(张量)意味着N维数组,Flow(流)意味着基于数据流图的计算,T ...
- python接口自动化（五）--接口测试用例和接口测试报告模板（详解）
简介 当今社会在测试领域,接口测试已经越来越多的被提及,被重视,而且现在好多招聘信息要对接口测试提出要求.区别于传统意义上的系统级别测试,很多测试人员在接触到接口测试的时候,也许对测试执行还可以比较顺 ...
- .NET Core微服务之基于Ocelot实现API网关服务（续）
Tip: 此篇已加入.NET Core微服务基础系列文章索引 一.负载均衡与请求缓存 1.1 负载均衡 为了验证负载均衡,这里我们配置了两个Consul Client节点,其中ClientServic ...
- 【朝花夕拾】四大组件之（二）Service篇
一.Service是什么 对于这个问题,想必大家都能说出一二,如“它是四大组件之一”.“在后台处理一些操作”等.咱们这里看看官方文档中的描述,官方语言一般都是准确且言简意赅的,这里可以体验一下其风格. ...
- ACM：读入优化
两个简单的读入优化 int getin(){ ;; while(!isdigit(tmp=getchar()) && tmp!='-'); ,tmp=getchar(); )+(ans ...
- 基于python脚本，实现Unity全平台的自动打包
转载请标明出处:http://www.cnblogs.com/zblade/ 0. 概述 本文主要针对项目中自动打包过程进行调研,实现用python脚本来打出win/android/ios三个平台下的 ...
- Vue2.0源码阅读笔记（一）：选项合并
Vue本质是上来说是一个函数,在其通过new关键字构造调用时,会完成一系列初始化过程.通过Vue框架进行开发,基本上是通过向Vue函数中传入不同的参数选项来完成的.参数选项往往需要加以合并,主要有 ...