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. zipfile zip

    Python模块学习:zipfile zip文件操作 2015/05/27 · 系列教程 · zipfile 分享到:3 原文出处: DarkBull    最近在写一个网络客户端下载程序,用于下载服 ...

  2. USRP内部的寄存器

    usrp_regs.hpp #ifndef INCLUDED_USRP2_REGS_HPP #define INCLUDED_USRP2_REGS_HPP ////////////////////// ...

  3. Noip模拟 Day6.13 By LD T1

    一.哲哲回家 出题人的解答: 可以将其转化成最短路模型. 这个地方转车怎么转移有点困难,有两种方法: 1.我们可以再把每一个点拆成M个点,我们用F[i,j]表示从1号点到i这个点并且坐在j路车上的最少 ...

  4. [RK3288][Android6.0] 系统按键驱动流程分析【转】

    本文转载自:http://blog.csdn.net/kris_fei/article/details/77894406 Rockchip的按键驱动位于 kernel/drivers/input/ke ...

  5. 假如Java对象是个人······

    假如Java对象是个人,那意味着它也具备了我们人所有的东西,头,身体,大长腿. 头 头就是我们的对象头(Header).根据JAVA虚拟机规范,我们的对象头分为两部分,分别是存储对象自身的运行时数据和 ...

  6. python-----删除文件到回收站

    python删除文件一般使用os.remove,但这样删是直接删除文件,不删到回收站的,那么想删除文件到回收站怎么办? 这时,就需要使用shell模块了 from win32com.shell imp ...

  7. makefile 参数

    GNU Make make是负责从项目的源代码中生成最终可执行文件和其他非源代码文件的工具. make命令本身可带有四种参数:标志.宏定义.描述文件名和目标文件名. 其标准形式为:make [flag ...

  8. 查看mysql数据库的所有配置信息和服务器的各种状态

    查看MySQL服务器配置信息 mysql> show variables; 2, 查看MySQL服务器运行的各种状态值 mysql> show global status;

  9. P1128 [HNOI2001]求正整数

    传送门 rqy是我们的红太阳没有它我们就会死 可以考虑dp,设\(dp[i][j]\)表示只包含前\(j\)个质数的数中,因子个数为\(i\)的数的最小值是多少,那么有转移方程 \[f[i][j]=m ...

  10. Django day 34 过滤课程，登录，redis，python操作redis

    一:过滤课程, 二:登录 三:redis, 四:python操作redis