【css】图片垂直水平居中
2024-09-28 04:17:35
一、已知宽高的图片实现垂直水平居中
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
最新文章
- SQLSERVER JDBC 存储过程调用偶尔很慢的原因之一【sp_sproc_columns】
- canvas实现钟表
- IKAnalyzer进行中文分词和去停用词
- 慕课网-安卓工程师初养成-2-12 如何在Java中使用注释
- Flashback Query、Flashback Table(快速闪回查询、快速闪回表)
- ANSIC程序到KeilC51的移植心得
- MyEclipse6.5安装SVN插件的三种方法
- OC——动态添加Button和监听UIAlertView按钮
- Python第二天课程
- iOS学习之Socket使用简明教程－ AsyncSocket
- 如何配置VS使得可以通过域名或IP访问
- 【Qt编程】基于Qt的词典开发系列<十一>系统托盘的显示
- 野路子码农系列（2）Python中的类，可能是最通俗的解说
- JDK源码分析（4）之 LinkedList 相关
- (并发编程)线程 (理论-创建-lock-属性-守护，与进程的对比)
- fastdfs：安装nginx
- VMWARE workstation 9 收缩虚拟硬盘
- MongoDB自动删除过期数据--TTL索引
- HTTP协议笔记整理
- Makefile的简单编写【学习笔记】