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. C#编译器优化那点事 c# 如果一个对象的值为null，那么它调用扩展方法时为甚么不报错 webAPI 控制器（Controller）太多怎么办？ .NET MVC项目设置包含Areas中的页面为默认启动页 （五）Net Core使用静态文件 学习ASP.NET Core Razor 编程系列八——并发处理

    C#编译器优化那点事   使用C#编写程序,给最终用户的程序,是需要使用release配置的,而release配置和debug配置,有一个关键区别,就是release的编译器优化默认是启用的.优化代码 ...

  2. R语言pdf输出中文乱码处理

    1.使用基础包.使用函数pdf()输出 在使用pdf()函数时,要输出中文,仅仅有一种字体可选. 样例: pdf("chinese.pdf",family="GB1&qu ...

  3. 扩展gcd求解二元不定方程及其证明

    #include <cstdio> #include <iostream> using namespace std; /*扩展gcd证明 由于当d = gcd(a,b)时: d ...

  4. 60分钟Python快速学习

    之前和同事谈到Python,每次下班后跑步都是在听他说,例如Python属于“胶水语言啦”,属于“解释型语言啦!”,是“面向对象的语言啦!”,另外没有数据类型,逻辑全靠空格缩进表示等. 今天自己用了6 ...

  5. HDU5768Lucky7

    Lucky7 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Subm ...

  6. pgsql数据库应用两点注意

    今天在写一个sql脚本时遇到了两个问题,记录一下. 1,pgsql中没有select top n语句,可以用limit n代替. 2,pgsql可以在定义函数存储过程时使用变量,但要注意函数定义中的函 ...

  7. bzoj 1724: [Usaco2006 Nov]Fence Repair 切割木板【堆】

    如果反着看,看成合并木板,就和合并果子一样了,把若干块放进一个小根堆,然后每次取出两个合并,把合并结果加进答案和堆里 代码里小根堆用优先队列实现(懒 #include<iostream> ...

  8. Lightoj 1010 - Knights in Chessboard (胡搞)

    题目连接: http://www.lightoj.com/volume_showproblem.php?problem=1010 题目描述: 有一个n*m的棋盘,根据象棋中马走日字的规则,问此棋盘最多 ...

  9. D. Vasya And The Matrix(Educational Codeforces Round 48)

    D. Vasya And The Matrix time limit per test2 seconds memory limit per test256 megabytes inputstandar ...

  10. 双摆模拟 python（转）

    双摆 是 混沌理论 中的一个常见示例,这里通过 python 的作图工具包Matplotlib 来模拟双摆的运动过程: 注意:在 vs2017 中可以正确运行程序,在 cmd 环境下有时报错 &quo ...