利用绝对定位实现垂直居中




<div style="width: 200px;height: 200px;background: gray;position: relative">
        <div style="position: absolute;top: 0;bottom: 0;margin:auto 0;width: 100%;height:50px;background: black"></div>
</div>


原理就是利用top和bottom将子div块的高度（height+margin）为包含框的height，上下margin对半分
				


				
时间： 2024-11-09 21:24:03 

		


		


	

	
	

		


		
利用绝对定位实现垂直居中的相关文章


								

		

			

                利用绝对定位和相对定位对CSS中区块进行位置调整
			

		

		

									

				首先,我们需要明白相对定位和绝对定位的含义. 相对定位:就是设置一个参照物,其他元素或者区块相对于这个参照物进行偏移,而设置为相对定位的元素就是这个参照物. 绝对定位:绝对定位的偏移位置是相对于他的设置为相对定位的上级或者上上级,若这些都没有设置定位,则相对于BODY进行偏移,绝对定位不占位置. 以下是利用相对定位和绝对定位实现区块的位置调整,效果图如下: 代码如下: <!DOCTYPE html><html><head lang="en"> <			

		

	

				

		

			

                利用绝对定位与margin实现元素居中
			

		

		

									

				例: 要让一个width:100px ; height: 100px;的div,相对body居中. div{ width:100px; height:100px; border: 1px solid black; box-sizing: border-box; position:absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px;}     因为绝对定位是相对于父级进行的定位,而margin是相对于自身进行定位			

		

	

				

		

			

                移动端利用-webkit-box水平垂直居中
			

		

		

									

				首先,必须要在父元素上用display:-webkit-box. 一.box的属性: 1.box-orient 用于父元素,用来确定父容器里子容器的排列方式,是水平还是垂直. horizontal在水平行中从左向右排列子元素:vertical从上向下垂直排列子元素. horizontal:    vertical: <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8&			

		

	

				

		

			

                利用vertical-align:middle垂直居中
			

		

		

									

				以前总是以为vertical-align与text-align是同样的道理,一个是垂直居中,一个是水平居中,结果在这里一点效果也没有.事实上vertical-align与text-align完全不一样,vertical-align不能这样用. vertical-align 属性设置元素的垂直对齐方式.该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值.这会使元素降低而不是升高.在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式.默认值:baselin			

		

	

				

		

			

                css水平垂直居中总结
			

		

		

									

				在网页布局中,垂直居中对齐总是一个绕不过的话题,而且这两种对齐方式由于浏览器渲染方式的不同,也存在很多不同的场景,本文试图将这些场景一一列举并给出解决方案,也是对这个知识点的一点回顾和总结. 1.水平居中 水平居中这个问题首先要搞清楚存在两个条件才能够称之为水平居中,即父元素必须是块级盒子容器,父元素宽度必须已经被设定好,在这两个前提下我们来看水平居中问题. 场景1:子元素是块级元素且宽度没有设定 在这种情况下,实际上也不存在水平居中一说,因为子元素是块级元素没有设定宽度,那么它会充满整个父级元			

		

	

				

		

			

                css实现水平 垂直居中
			

		

		

									

				css实现水平居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平居中</title> <style> .box1{ border: 1px solid #000; text-align: center; } .box2{ display: inline-block; backgroun			

		

	

				

		

			

                Html利用CSS布局技巧
			

		

		

									

				单列布局水平居中 水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素) 使用inline-block 和 text-align实现 .parent{text-align: center;} .child{display: inline-block;} 优点:兼容性好:不足:需要同时设置子元素和父元素 使用margin:0 auto来实现 .c			

		

	

				

		

			

                css图片居中(水平居中和垂直居中)
			

		

		

									

				http://www.51xuediannao.com/html+css/htmlcssjq/css_img_center.html css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍 css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 auto实现图片水平居中 利用margin: 0 auto实现图片居中就是在图片上加上c			

		

	

				

		

			

                利用HTML和CSS实现常见的布局
			

		

		

									

				水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素) 使用inline-block 和 text-align实现 .parent{text-align: center;} .child{display: inline-block;} 优点:兼容性好:不足:需要同时设置子元素和父元素 使用margin:0 auto来实现 .child{widt