高度不固定的容器的上下左右的居中显示。(重点是垂直居中)

悠悠 2023-07-05 14:48 19阅读 0赞

基本上常用的就这四种：

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    	   
    	    /*方法一：1）将父级容器设置为：*/
    	  .gao{
    	/*	display:table-cell;
    		vertical-align:middle;
    		text-align:center;
    		width:100px;	
    		height:100px;
    		background: #ddd;
    	  }	  */
    	  /*方法二：2)使用flex*/
    	 /* .gao{
    		display: flex;
    		justify-content: center;
    		align-items: center;
    		width:100px;	
    		height:100px;
    		background: #ddd;
    	  }	*/
    	  /*方法三：*/
    	/*  .test{
    	  	position: absolute;
    	  	left:50%;
    	  	top:50%;
    	  	margin-left:-50px;
    	  	margin-top:-50px;
    	  	width:100px;
    	  	height:100px;
    	  	border: 1px solid #aaa;
    	  }*/
    	  /*方法四：*/
    	  /*.test{
    	  	position: absolute;
    	  	left:50%;
    	  	top:50%;
    	  	width:100px;	
    		height:100px;
    		background: #ddd;
    		transform: translateY(-50%) translateX(-50%);
    	  }*/
    	</style>
    </head>
    <body>
     <div class="gao">
     	<div class="test">dsfdsf</div>
     </div>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关 css实现图片上下左右居中

一种常用的方式是把外层的 div 设置为 table-cell；然后让内部的元素上下左右居中。 CSS 代码如下： .content { widt

向右看齐/ 2023年07月19日 08:10/ 0 赞/ 23 阅读

相关高度不固定的容器的上下左右的居中显示。(重点是垂直居中)

基本上常用的就这四种： <!DOCTYPE html> <html> <head> <title></title> <style

悠悠/ 2023年07月05日 14:48/ 0 赞/ 20 阅读

相关不固定宽高的居中方法（水平和垂直方向的）

display: inline-block; margin:0 auto; position: relative; top:50%; t

青旅半醒/ 2023年06月10日 05:22/ 0 赞/ 35 阅读

相关弹性盒子上下左右居中

短小精悍哈哈哈 { display: flex; flex-direction: row; justify-c

柔情只为你懂/ 2022年11月17日 13:43/ 0 赞/ 200 阅读

相关 jquery任意不固定大小div水平垂直居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

╰+攻爆jí腚メ/ 2022年08月10日 14:56/ 0 赞/ 224 阅读

相关无固定高度的div垂直居中

1、无固定高度的div垂直居中 – CSS 实现效果图如下： ![这里写图片描述][20160405144623489] 代码附上： <!DOCTYPE h

比眉伴天荒/ 2022年07月26日 00:24/ 0 赞/ 213 阅读

相关大小不固定，多行文字的垂直居中

敬请关注公众：包含全套 Vue 最新面试题 js最近面试题等大量前端知识技术。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shado

逃离我推掉我的手/ 2022年07月16日 01:49/ 0 赞/ 199 阅读

相关没有固定高度的div，在父元素中垂直居中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9f

水深无声/ 2022年04月13日 05:59/ 0 赞/ 283 阅读

相关 css系列—水平垂直左右居中

> 水平居中：定位法 > > 1.父元素上设置display:flex > > 2.子元素元素上设置margin:auto。

缺乏、安全感/ 2022年01月23日 06:23/ 0 赞/ 266 阅读

相关 css 让一个图片在固定的尺寸中上下左右居中object-fit

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMz

水深无声/ 2021年11月18日 01:36/ 0 赞/ 357 阅读