div垂直居中，图片垂直居中
div居中分为两种，一种是有固定宽高，一种是没有固定宽高
1.固定宽高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.test {
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
margin-left: -100px;
margin-top: -50px;
background-color: #000000;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
2.宽高不固定
(1)本人认为是最好的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.test {
position: absolute;
top: 50%;
left: 50%;
background-color: #000;
width:50%;
height: 80%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
(2)如果上面方法不行，可以考虑用这种：table方法，html新标签属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father {
display: table;
width: 100%;
height: 50%;
position: absolute;
background-color: red;
}
.chirdren {
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="father">
<div class="chirdren">
垂直居中
</div>
</div>
</body>
</html>
（3）css3,vertical-align方法。这种一般不可行，有局限，不怎么使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father {
text-align: center;
height: 50%;
position: absolute;
background-color: red;
}
.father:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.chidren {
display: inline-block;
vertical-align: middle;
width: 70%;
}
</style>
</head>
<body>
<div class="father">
<div class="chidren">
<p>垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中</p>
</div>
</div>
</body>
</html>
(4).如果都不行就使用最笨的方法，padding。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.test {
padding: 20%;
background-color: red;
}
</style>
</head>
<body>
<div class="test">
<p>垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中</p>
</div>
</body>
</html>
总结：总有一种方法适合你，给一些新手少走一些弯路，网上那些真的是回答真随意，解决不了问题，我还是比较喜欢直接给可用的代码，让新人自己去研究，这才是解决问题的根本
下面是图片垂直居中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.test{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="test"><img src="img/404.png" alt="" /></div>
</body>
</html>
div垂直居中，图片垂直居中相关推荐
- div图片垂直居中 如何使div中图片垂直居中
div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 在曾经的 淘宝UED 招聘 中有这样一道题目: "使用纯CSS ...
- div 内 图片 垂直居中
vertical-align属性适用于 line-block: <div class="title"><img src="img_p1_title.pn ...
- 垂直居中及容器内图片垂直居中的CSS解决方法
方法一: <style type="text/css"> <!-- * {margin:0;padding:0} div { width:500px; h ...
- html 如何把文字和图片放到一行,DIV+CSS图片和文字如何显示同一行
如果把文字和图片放在同一个图层的,文字可以做到居中,但是图片就不能,因为图片默认是左上对齐的!如果你令到图片居中了,文字就会相对于图片右下对齐了!如果你想2个都居中的话,就不能把他们放在同一个div, ...
- android图片垂直居中,img图片在div里垂直居中的最佳解决方案
图片在div里水平居中是非常简单的,但是在垂直居中方面就不是那么容易了,青岛星网下面跟大家分享:img图片在div里垂直居中的最佳解决方案,使用Flexbox来垂直居中图片. HTML代码部分 CSS ...
- Div图片垂直居中的方法
<style> .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-a ...
- div内图片和文字水平垂直居中
大小不固定的图片.多行文字的水平垂直居中 本文综述 想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实 ...
- html语言div图片垂直居中,图文详解图片水平垂直居中的五种方法
1.text-align:center实现图片水平居中 text-align一般用于文本的水平居中,也可以用于图片,代码如下: CSS部分: div{ text-align:center; width ...
- 关于div中图片水平垂直居中的问题
最近在做一个项目,里面涉及到不固定尺寸要在div里面水平垂直居中显示 我没有用table布局,而是用了div+css,找了很久,终于在网上找到解决方案,特此记录备用 关键核心代码如下: <div ...
- position属性及实现图片垂直居中
转自: http://blog.onlygrape.com/position/186 定义 position 属性把元素放置到一个静态的.相对的.绝对的.或固定的位置中. span>positi ...
最新文章
- 摩托罗拉SE4500 三星 S3C6410 Wince6.0平台软解码调试记录以及驱动相关问题解释
- 18B树、B++树和Trie树
- java 路径获取文件名称_java 根据文件获取文件名及路径的方法
- MySQL之DDL（定义）语句
- python模板引擎传迭代器_python之路 模块，序列化，迭代器，生成器
- matlab在遥感数字图像处理方面的应用
- 进度条制作-GIF动画
- Linux视频教程—笔记(全)
- 仿微信设置字体大小控件
- 丹佛机场行李处理系统分析
- 数独游戏 | c++ | BFS
- 《影响力》- 作者 Robert B. Cialdini 罗伯特·西奥迪尼 读后感
- Loongson_灵珑9S2A 逸珑8089 3B1500龙芯电脑的使用感触
- java 获取一年内周六周日日期
- android style(样式)和theme(主题)设置
- cmd命令行使用pip install XXX库时，出现安装失败。
- Linux定时任务 crontab（-l -e）、at、batch
- NGS测序嵌合体是个需要去除的错误扩增序列
- 甘肃西部河谷科技有限公司官网上线 | LTD技术行业案例分享
- etermPID配置放大软件下载使用部署
热门文章
- 二次开发时，css中 @font-face 的处理方法
- 使用python控制其他软件运行并操作处理数据_Python 运行其他程序
- 数码单反相机与无反光镜相机。选择产品摄影解决方案
- 数据分析最常用的excel函数公式大全
- 我的Qt作品（12）使用Qt+OpenCV实现一个带旋转角度的Shape形状匹配演示软件
- openwrt下如何生成ipk包到对应的开发板上运行 以helloword为例（三）
- [方便WAP网站开发]在线手机WAP模拟器或软件
- 跟父亲一样伟大的程序员，请照顾好自己！
- 采用加速度传感器的角度测量仪系统硬件电路设计_温度传感器电路
- html项目答辩ppt范文,论文答辩ppt 论文ppt答辩模板|论文答辩ppt范文6页