css 四种盒子垂直居中方式

最新推荐文章于 2024-05-10 14:49:40 发布
最新推荐文章于 2024-05-10 14:49:40 发布
阅读量3.1k 收藏 2
点赞数 1
分类专栏： 前段_css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011301203/article/details/68947777
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*定位方式一*/
			.father{
				position: absolute;
				 text-align: center; 
			}
            .son{  
                position: absolute;  
                top:50%;  
                left: 50%;
                margin-top: -50px;  
                margin-left: -50px;
            }  
           
           /*定位方式二*/
           	/*.father{
           		position: absolute;
           	}
            .son{  
                position: absolute;  
                top: 50%;  
                left: 50%;  
                -webkit-transform: translateX(-50%) translateY(-50%);  
            }  */
           
           /*定位方式三*/
           	/*.father{
           		position: absolute;
           	}
            .son{  
                margin: auto;    
                position: absolute;    
                top: 0; left: 0; bottom: 0; right: 0;    
            } */
            
            /*flex方式*/
			/*.father{
				display: flex;
			}
			.son{
				margin: auto;
			}*/
			
			.size_fater{
				width:300px;
				height: 300px;
				background-color: royalblue;
			}
			.size_son{
				width:100px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		
		<div class="father size_fater">
			<div class="son size_son">子盒子居中</div>
		</div>
	</body>
</html>









                

        

        

    




    

      

        

            

              
                
                  心郎
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
CSS-让盒子水平垂直居中的几种方式

				
			

			

				

					zgq1259805541的博客
				

				

					05-05
					
					1340
					
				

			

		

		

			
				
<div class="box">
      <div class="small">small</div>
    </div>

.box {
        width: 300px;
        height: 300px;
        background: #ddd;
      }
.small {
       width: 100px;
       height: 100px;
       background: skyblue.

			
		

	



                

              
                



	

		

			

				
					
css 如何让盒子垂直居中,css 盒子垂直居中

				
			

			

				

					weixin_28942523的博客
				

				

					08-04
					
					2285
					
				

			

		

		

			
				
面试的时候经常会被问到这样一个题目：让一个元素中内容垂直居中怎么做。其实之前，我就会两种，line-height和table-cell，今天做项目，遇到了这个问题，就系统的查了一下，总结一下方法：1、line-heightdiv{height: 100px;line-height:100px;text-align:center;}这样就能让div中的文字水平垂直居中了2、display:table...

			
		

	



                


  
              

                


	

		

			

				
					
css - 盒子水平垂直居中的几种方式

				
			

			

				

					qq_43886365的博客
				

				

					05-11
					
					1202
					
				

			

		

		

			
				
前端div盒子水平垂直居中的几种方式:
使用子绝父相，利用css3新增`transform的translate`属性来进行垂直居中；
translate可以同时传两个属性，第一个是水平方向移动距离，第二个是垂直方向的移动距离；translate中的%百分比相对的是自身的 ，也就是向左向上走自身的%50来实现居中效果；

			
		

	





	

		

			

				
					
CSS盒模型居中方法(1)

					
最新发布

				
			

			

				

					2401_84150102的博客
				

				

					05-10
					
					930
					
				

			

		

		

			
				
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！

			
		

	



		

			
		



	

		

			

				
					
CSS盒子垂直居中

				
			

			

				

					MDCG99的博客
				

				

					06-06
					
					509
					
				

			

		

		

			
				
auto自适应，只对块级元素有用，对内联元素和内联块级元素无用。1.常用margin：auto 子绝父相。垂直方向的垂直居中不发生作用），此时子元素变为弹性子元素。（如果父元素使用了定位，则。弹性盒布局，给父元素设置。在已知子元素宽高的情况下。

			
		

	





	

		

			

				
					
css：盒子垂直居中的几种方法

				
			

			

				

					LiliGong1的博客
				

				

					07-18
					
					1706
					
				

			

		

		

			
				
方法三子元素绝对定位后，top，left，right和bottom都设置为0，margin为auto。方法六让元素以表格单元形式出现，在父元素中,文本水平居中，垂直居中；子元素marginauto。方法二子元素绝对定位后，使用transform中的translate都为-50%后实现。方法四flex布局父元素加入flex布局后，使用水平居中和垂直居中。父元素加入栅格，子元素marginauto。方法五栅格布局grid。......

			
		

	





	

		

			

				
					
css盒子垂直水平居中的四种方式

				
			

			

				

					m0_62823653的博客
				

				

					03-13
					
					1348
					
				

			

		

		

			
				
绝对定位居中法有三种，还有一种是flex属性居中

1.绝对定位居中法

（利用绝对定位）（如果是在父盒子里居中，则个父盒子设置相对定位）子绝父相

   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   margin: auto;


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">...

			
		

	





	

		

			

				
					
CSS 盒子垂直居中的方法

				
			

			

				

					qq_63299825的博客
				

				

					06-04
					
					2398
					
				

			

		

		

			
				
在日常开发网站界面或者是App。小程序过程中，都会遇到将盒子水平垂直居中的需求。不同的需求需要我们采取不同的方法进行元素的水平垂直居中。

			
		

	





	

		

			

				
					
[css]盒子水平垂直居中的6种方法

					
热门推荐

				
			

			

				

					belloc_li的博客
				

				

					02-17
					
					1万+
					
				

			

		

		

			
				
让盒子水平垂直居中是前端很基础的知识，在前端的面试中也经常会考查到，今天我就整理总结一下盒子水平垂直居中的几种方法。
盒子的设定

父盒子：width: 400px;   height: 500px;
子盒子：width: 100px;  height: 100px;
（当然也可以是其他数值，只是为了统一得到一个结果就提前给个设定）

预期结果

方法
1.定位法
利用子绝父相，给父盒子添加相对定位子盒子添加绝对定位
代码如下：
<!DOCTYPE html>
<html lang="en

			
		

	





	

		

			

				
					
CSS盒子5种居中方式

				
			

			

				

					qq_56918166的博客
				

				

					07-02
					
					2874
					
				

			

		

		

			
				
3.使用绝对定位并margin自适应进行居中。4.使用table-cell进行居中显示。2.使用绝对定位并进行偏移。5.使用弹性盒子来实现居中。

			
		

	





	

		

			

				
					
使用CSS实现盒子水平垂直居中的方法(8种)

				
			

			

				

					01-18
				

			

		

		

			
				
原始代码： ... <!...<... <...meta name=viewport content=width=device-width, initial-scale=1.0>...link rel=stylesheet href=center.css> </head> <body>    <div class=son><

			
		

	





	

		

			

				
					
CSS 实现盒子水平居中、垂直居中和水平垂直居中….docx

				
			

			

				

					11-24
				

			

		

		

			
				
实现盒子垂直居中的方法有多种，以下是三种常见的方法：  1. 方法一：使用 `position` 定位（适用于子盒子有宽度和高度的时候）  使用 `position: absolute;` 和 `top: 50%;` 可以实现盒子垂直居中，但这只适用于子...

			
		

	





	

		

			

				
					
css常用元素水平垂直居中方案

				
			

			

				

					01-19
				

			

		

		

			
				
flex实现水平垂直居中 适用场景：父子宽高都可未知(比较推荐这种方式，简单，而且目前兼容性也不错。)  <html>  <head>  <style>  .parent {  width: 100%;  height: 100px;  background: cyan;  ...

			
		

	





	

		

			

				
					
CSS水平垂直居中的几种方法总结

				
			

			

				

					09-24
				

			

		

		

			
				
主要介绍了CSS水平垂直居中的几种方法总结,垂直居中是布局中十分常见的效果之一,本文介绍了几种方法，有兴趣的可以了解一下。

			
		

	





	

		

			

				
					
CSS解决未知高度的垂直水平居中自适应问题

				
			

			

				

					09-27
				

			

		

		

			
				
今天有人问起，晚上试着写出来，供参考； 以下代码兼容主流浏览器IE... 从最简单的开始………… 一、如何让一个DIV水平居中？ 这个简单不作过多说明！ [code] <style> body { text-align:center} #info{ margin:0

			
		

	





	

		

			

				
					
css3 过渡/旋转/动画

				
			

			

				

					
				

				

					04-06
					
					5048
					
				

			

		

		

			
				
div{
				width:200px;
				height: 200px;
				line-height:200px;
				color: chartreuse;
				text-align: center;
			}
			
			
			.div1{
				background-color: royalblue;
				/*position: absolute;*/
				w

			
		

	





	

		

			

				
					
css 层级 脱标流 可见性

				
			

			

				

					
				

				

					08-28
					
					1808
					
				

			

		

		

			
				
/*
		 
		 * 脱标的盒子居中显示（重点）
		 * 		1 首先走父盒子宽度一半
		 * 		2 使用margin-left设置往回走子元素自己宽度的一半
		 * 				position: absolute;
		 *				left: 50%;
		 * 				margin-left: -250px;
		 * Z-index(层级)
		 * 		1 元素与元素之间的层级关系

			
		

	





	

		

			

				
					
css 浮动及定位

				
			

			

				

					
				

				

					08-28
					
					966
					
				

			

		

		

			
				
/*
		 
		 * 1 文档流（normal flow）
		 * 		在标准情况下 块级元素独占一行显示 行内元素在一行上显示
		 * 
		 * 2 浮动（float）
		 * 		用法：float：left|right
		 * 		特点：
		 * 			1 设置的浮动的元素 不占原来的位置（脱离标准流）
		 * 			2 可以让块元素在一行上显示
		 * 			3 给一个元素

			
		

	





	

		

			

				
					
css盒子垂直居中的几种方法

				
			

			

				

					06-06
				

			

		

		

			
				
以下是几种常见的CSS盒子垂直居中的方法：  1.使用flexbox布局：使用display:flex和justify-content/align-items属性来设置盒子的垂直和水平居中。  2.使用绝对定位：首先将父元素设置为相对定位，然后将子元素设置...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值