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. 使用带粒子效果的 CAEmitterLayer

    1.用CAEmitterLayer产生粒子效果 2.封装CAEmitterLayer 3.封装下雪.下雨的粒子效果控件 一.用CAEmitterLayer产生粒子效果 - (void)emitterL ...

  2. ZOJ 3872 计算对答案的贡献

                                                   D - Beauty of Array Description Edward has an array A ...

  3. java操作linux，调用shell命令

    import org.junit.jupiter.api.Test; import java.io.BufferedReader; import java.io.IOException; import ...

  4. C#与excel互操作的错误无法将类型为“Microsoft.Office.Interop.Excel.ApplicationClass”的 COM 对象强制

    C#与excel互操作的错误无法将类型为“Microsoft.Office.Interop.Excel.ApplicationClass”的 COM 对象强制 如果您使用的电脑要操作的是office2 ...

  5. iOS 开发 公司开发者账号,在多台Mac上合作开发，共用一个账号和证书--图文详解

    参考 导出证书申请的MAC里的Xcode的开发者账号 .developerprofile 导出的开发者账号文件.developerprofile 导出PKCS12既是.p12文件 所拷贝的资料, .d ...

  6. 【Silverlight】Bing Maps学习系列（三）：如何控制地图

    [Silverlight]Bing Maps学习系列(三):如何控制地图 本篇主要介绍如何对地图的一些常用控制操作,包括地图加载模式.根据精度和纬度定位.变焦程度等. 一.动态设置地图加载模式 在本系 ...

  7. Handle/Body pattern（Wrapper pattern）

    Handle Body Pattern 一些设计模式,通过一系列非直接的间接的方式(这种间接的方式,可称其为 handle(把手)),完成接口与实现(实现可称为 body(主体))的分离 Handle ...

  8. [Advance] How to debug a program (上)

    Tool GDB Examining Memory (data or in machine instructions) You can use the command x (for “examine” ...

  9. 洛谷 P2577 [ ZJOI 2005 ] 午餐 —— DP + 贪心

    题目:https://www.luogu.org/problemnew/show/P2577 首先,想一想可以发现贪心策略是把吃饭时间长的人放在前面: 设 f[i][j] 表示考虑到第 i 个人,目前 ...

  10. recast 生成navmesh主要流程

    参考:      critterai  http://www.critterai.org      recast & Detour https://github.com/recastnavig ...