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) 本文地址: http://blog.csdn.net/caroline_wendy 两个升序列的同样元素, 须要使用两个指针, 依次遍历, 假设相等输出, 假设小于或 ...

  2. POJ2773 Happy 2006【容斥原理】

    题目链接: http://poj.org/problem?id=2773 题目大意: 给你两个整数N和K.找到第k个与N互素的数(互素的数从小到大排列).当中 (1 <= m <= 100 ...

  3. 将mvvmlight 移植到 ios step1

    https://github.com/wangrenzhu/SimpleIoc-For-Objective-c simple ios for objective-c 版 基本实现 全部功能  完美实现 ...

  4. android压力测试命令monkey详解【转】

    本文转载自:http://www.jb51.net/article/48557.htm 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-29我要评论 这篇文章主要介绍了android ...

  5. bzoj2709: [Violet 1]迷宫花园

    二分答案,spfa check就行了. gb题卡精度. #include<cstdio> #include<iostream> #include<cstring> ...

  6. bzoj3196 二逼平衡树——线段树套平衡树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3196 人生中第一棵树套树! 写了一个晚上,成功卡时 9000ms+ 过了! 很要注意数组的大 ...

  7. cisco secure ACS服务器搭建

    网上下载Cisco Secure Access Control System 5.2.iso的镜像,总共有两部分 http://pan.baidu.com/disk/home#path=%252FCi ...

  8. 手推FP-growth (频繁模式增长）算法------挖掘频繁项集

    一.频繁项集挖掘为什么会出现FP-growth呢? 原因:这得从Apriori算法的原理说起,Apriori会产生大量候选项集(就是连接后产生的),在剪枝时,需要扫描整个数据库(就是给出的数据),通过 ...

  9. sqlserver2000连接失败,不存在或拒绝访问

    一 看ping 服务器IP能否ping通. 这个实际上是看和远程sql server 2000服务器的物理连接是否存在.如果不行,请检查网络,查看配置,当然得确保远程sql server 2000服务 ...

  10. bzoj 1635: [Usaco2007 Jan]Tallest Cow 最高的牛【差分】

    s[i]为差分后的"i这头牛前有几头比它高",计算答案的时候加成前缀和,假设第一头最高减一下即可 用map记录一下被加过的区间,避免重复 #include<iostream& ...