【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 ...
随机推荐
- 史上最全的springboot导出pdf文件
最近项目有一个导出报表文件的需求,我脑中闪过第一念头就是导出pdf(产品经理没有硬性规定导出excel还是pdf文件),于是赶紧上网查看相关的资料,直到踩了无数的坑把功能做出来了才知道其实导出exce ...
- Java Socket聊天室编程(一)之利用socket实现聊天之消息推送
这篇文章主要介绍了Java Socket聊天室编程(一)之利用socket实现聊天之消息推送的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 网上已经有很多利用socket实现聊天的例子了 ...
- Python后台开发Django（ 模板 与 值匹配 ）
模板文件(templates) 在setting.py中,设置模板存放位置 在APP中view的使用 from django.shortcuts import render #导入 def homex ...
- 【朝花夕拾】Android性能篇之（八）ANR篇--草稿
1.ANR概念 2.ANR发生场景 Android开发者官网 上说到了两个原因:(1)点击按键或者触摸屏幕等输入事件在5s内没有响应:(2)10s内没有完成广播事件.如下所示: Android wil ...
- 【Android Studio安装部署系列】二十四、Android studio中Gradle插件版本和Gradle版本关系
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 在从Android Studio3.0.0版本升级到Android Studio3.0.1版本的时候,出现了一个问题,需要升级Gra ...
- 使用 ASP.NET Core MVC 创建 Web API（二）
使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 六.添加数据库上下文 数据库上下文是使用Entity Framewor ...
- Matlab图像处理常用基本函数
之前用Matlab做图像处理工作时,用到什么函数就查什么函数,从没做过系统的总结,再做的时候又要去查,所以总结还是有必要的~ 为了方便,在此只列出函数名和基本用法,如不特别指出,不详细说明参数,辅助h ...
- 如何开发AR增强现实应用与产品
2016年被称为VR元年,可见火爆程度,但是我要告诉你,其实还有一种技术AR(增强现实)技术,才是下一个真正的“风口”技术.可以预见的是,未来AR应用爆发之时,必将超越VR产业规模,开拓千亿级市场空间 ...
- Thread之十：停止线程方法汇总
在上篇文章<多线程的使用——Thread类和Runnable接口>中提到中断线程的问题.在JAVA中,曾经使用stop方法来停止线程,然而,该方法具有固有的不安全性,因而已经被抛弃(Dep ...
- Python两步实现关联规则Apriori算法，参考机器学习实战，包括频繁项集的构建以及关联规则的挖掘
.caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...