div水平垂直居中方法一：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			#test{

				position: absolute;

				width: 100px;

				height: 100px;

				background: pink;

				left: 0;

				right: 0;

				bottom: 0;

				top: 0;

				margin: auto;

			}

		</style>

	</head>

	<body>

		<div id="test"></div>

	</body>

</html>

div水平垂直居中方法二：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			#test{

				position: absolute;

				width: 100px;

				height: 100px;

				background: pink;

				left: 50%;

				top: 50%;

				/*margin-left和margin-top的值为宽度和高度的一半*/

				margin-left: -50px;

				margin-top: -50px;

			}

		</style>

	</head>

	<body>

		<div id="test"></div>

	</body>

</html>

div水平垂直居中方法三：

未知div的宽高垂直水平居中

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			#test{

				background: pink;

				position: absolute;

				left: 50%;

				top: 50%;

				transform: translate(-50%,-50%);

			}

		</style>

	</head>

	<body>

		<div id="test">

			未知div的宽高垂直水平居中

		</div>

	</body>

</html> 

img水平垂直居中方法：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			html,body{

				height: 100%;

			}

			body{

				text-align: center;

			}

			body:after{

				content: "";

				display: inline-block;

				height: 100%;

				vertical-align:middle;

			}

			img{

				vertical-align: middle;

			}

		</style>

	</head>

	<body>

		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537119514734&di=5f0585bf2c64ae73b202f2cf98751cd5&imgtype=0&src=http%3A%2F%2Ftgi13.jia.com%2F116%2F258%2F16258758.jpg"/>

	</body>

</html>

CSS：div/img水平垂直居中的更多相关文章

  1. css的div动态水平垂直居中

      div动态水平垂直居中,思路如下: (1)先定位.如果相对于距离最近的父元素,用absolute:如果相对于body,用fixed. (2)然后,top和left都设为50%. (3)要居中的di ...

  2. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

  3. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  4. css3 flex 详解,可以实现div内容水平垂直居中

    先说一下flex一系列属性: 一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row- ...

  5. div盒子水平垂直居中方法

    文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...

  6. div盒子水平垂直居中的方法推荐

    父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝 ...

  7. css中：如何让一个图片（不知道宽高，宽高可能比父元素div大），在父元素div内部水平垂直居中，并且不溢出父元素div，且图片不拉伸变形（可等比例缩小）？

    欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...

  8. CSS实现元素水平垂直居中—喜欢对称美，这病没得治

    [TOC] 在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用text-align:center;如果它是一个块级元素,就对它自身应用margin:auto.然而要对一 ...

  9. CSS制作图片水平垂直居中

    所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...

随机推荐

  1. jquery验证插件validate自定义扩展

    <script src="${pageContext.request.contextPath}/resources/js/jquery-1.12.0.min.js" type ...

  2. Python输入输出及其他

    print用法 print会输出一个\n,也就是换行符,这样光标移动到了下一行行首,接着输出,之前已经通过stdout输出的东西依旧保留,而且保证我们在下面看到最新的输出结果.回车 \r 本义是光标重 ...

  3. SQL语句小结

    1.创建数据库 create database 数据库名 2.删除数据库 drop  database 数据库名 3.创建表 1>.create table 表名 (col1 type1 [no ...

  4. web 开发之js---巧用iframe实现jsp无刷新上传文件

    首先要说的就是 ajax 是无法实现上传文件的,可以想一下ajax与后台通信都是通过传递字符串,怎么能传递文件呢?其实出于安全考虑js是不能操作文件的,所以就不要再说用ajax来实现文件的上传了,这是 ...

  5. 使用 FFmpeg 处理高质量 GIF 图片

    使用 FFmpeg 处理高质量 GIF 图片 - 为程序员服务  http://ju.outofmemory.cn/entry/169845

  6. 解决ES集群状态异常教程(存在UNASSIGNED)

    解决ES集群状态异常教程(存在UNASSIGNED)_百度经验 https://jingyan.baidu.com/article/9158e00013f787a255122843.html

  7. 一起talk C栗子吧（第九十回：C语言实例--使用管道进行进程间通信三）

    各位看官们,大家好,上一回中咱们说的是使用管道进行进程间通信的样例.这一回咱们说的样例是:使用管道进行进程间通信.只是使用管道的方式不同样.闲话休提,言归正转.让我们一起talk C栗子吧! 我们在前 ...

  8. Struts数据验证

    Action类继承了ActionSupport类,而该类实现了Action.Validateable.ValidationAware.TextProvider.LocaleProvider和Seria ...

  9. YTU 2629: E1 一种颜色，三个分量

    2629: E1 一种颜色,三个分量 时间限制: 1 Sec  内存限制: 128 MB 提交: 300  解决: 226 题目描述 在计算机中,常用三种基色红(R).绿(G).蓝(B)的混合来表示颜 ...

  10. urllib2.urlopen超时未设置导致程序卡死

    没有设置timeout参数,结果在网络环境不好的情况下,时常出现read()方法没有任何反应的问题,程序卡死在read()方法里,搞了大半天,才找到问题,给urlopen加上timeout就ok了,设 ...