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. tt1

    DIm #include iostream.h#include iostream.h# #include iostream.h http://www.cnblogs.com/cmt/archive/2 ...

  2. IEDA-maven引用本地jia包

    简单说下为啥用maven引用本地jar包:当在pom文件中配置需要引用了jar的坐标,但是maven引用不了(原因未知情况下),这种情况下就需要找开发提供相关依赖的的jar文件打成一个jar包发送过来 ...

  3. php与国付宝对接过程吐槽

    最近.我们在打造全国第一家互联网+风险管理平台(避险谷)时.须要与第三方支付平台"国付宝"进行在线交易对接. 之前对接过支付宝 .感觉还非常easy,拿到国付宝的接口文档.我晕啊. ...

  4. LeetCode145 Binary Tree Postorder Traversal Java题解（递归 迭代）

    题目: Given a binary tree, return the postorder traversal of its nodes' values. For example: Given bin ...

  5. 2016/1/12 String 笔记整理

    String  简介                        文件名 Teststring 有实例 String类 即字符串类型,并不是Java的基本数据类型,但可以像基本数据类型一样使用,用双 ...

  6. [mac]WireShark检測不到网卡怎么办？

    wireshark是一个很好用的抓包工具,有windows版本号和mac版本号,在mac下安装wireshark,启动后发现提示"There are no interfaces on whi ...

  7. ios32---线程的状态

    // // ViewController.m // 04-了解-线程的状态 // // 创建线程是处于新建状态,start是就绪状态,会放入到可调度线程池里面(cpu看线程是否可以调用,是看线程是否在 ...

  8. YTU 2516: 剪刀石头布

    2516: 剪刀石头布 时间限制: 1 Sec  内存限制: 128 MB 提交: 193  解决: 123 题目描述 小慧小时候很喜欢和她的小伙伴们一起玩剪刀(Scissors).石头(Rock). ...

  9. windows下mongodb设置用户名密码&用python连接

    环境: 主机:WIN10 python版本:3.5 mongodb版本:3.4.2 开发环境:pyCharm mongodb设置用户名密码: 编写mongodb配置文件mongodb.confdbpa ...

  10. 在WIN7里IE8的开发人员工具打不开的解决办法

    IE8新增了开发人员工具,非常不错,比早期的DevToolbar好用多了.不过在我的Win7下使用的时候偶尔会出现一个莫名其妙的问题,就是整个开发人员工具窗口消失了,打不开了.当你使用win+Tab切 ...