首页 > 试题广场 >

垂直居中的方法

[问答题]
有哪些可以实现垂直居中的方法？
添加回答
绿皮兔子头像 绿皮兔子
https://blog.csdn.net/qq_29018891/article/details/86713076
发表于 2019-03-17 20:35:14 回复(0)
Tombs头像 Tombs
看了不懂 ，你砍我
发表于 2019-11-28 17:43:16 回复(0)
小菜🐔头像 小菜🐔
利用flex:
display:flex;
flex-deriction:column;
align-item:center;
利用定位和缩放:
position:aboslute;
left:0;
right:0;
top:0;
bottom:0
margin:auto;
transform:tanslate(-50%,-50);
编辑于 2019-03-19 11:32:38 回复(0)
钟强春头像 钟强春
display：flex；
justify-content:center；
align-items:center;
发表于 2019-02-22 16:45:38 回复(0)
在研究求职打法的长颈鹿很想去三亚看海头像 在研究求职打法的长颈鹿很想去三亚看海
法一：
.parent{
    position:relative;
}
.child{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
   marin:auto;
}
法二:
.parent{
    position:relative;
}
.child{
    positon:absolute;
     left:50%;
      top:50%;
     transform:translate(-50%，-50%);
}
法三:
.parent{
    display:flex;
   justify-content:center;
   alian-items:center;
}
法四:
.parent{
    height:500px;
   width:500px;
}
.child{
    height:100px;
    width:100px;
    margin-top:200px;
    margin-left:200px;
}

发表于 2023-03-08 18:46:52 回复(0)
AtonalMuse头像 AtonalMuse
对行级元素： 将父元素的line-height设为height一样的值；
对块级元素：1. 父元素：display: flex; align-items: center;
                     2. 父元素：position：relative;     子元素：position：absolute; top: 50%; transform: translateY(-50%);
发表于 2020-08-10 20:59:56 回复(0)
太阳煮的酒头像 太阳煮的酒

1.利用margin：auto法

margin：auto；top bottom left right均设置为0

2.利用margin负值法

position：absolute；

top：50%；

left：50%；

margin-top：height/2；

margin-left：width/2；

3.flex法

display：flex；

display：-webkit-flex；

justify-content：center；

align-items：center；

发表于 2019-06-06 16:49:16 回复(0)
陌上花i头像 陌上花i
margin:auto
发表于 2019-05-25 15:07:44 回复(0)
TiAmo_9955头像 TiAmo_9955
1：行内居中 2：多行内容居中 3 ：把容器当做表格单元 4：利用绝对定位以及margin值可以为负去实现绝对的居中 5：回到本文的首部，利用vertical-align：middle实现在整个页面居中，其最终效果跟方法4一样
发表于 2019-04-26 12:09:20 回复(0)
pbgf头像 pbgf
发表于 2019-01-27 21:47:13 回复(0)
被甩了一耳光的梦头像 被甩了一耳光的梦 


 
vertical-align：middle；
 

                                                                                    



                                        

                                            
                                                                                                                                                            发表于  2019-01-23 14:24:32
                                                    
                                                                                            
                                                回复(0)
                                                                                                                                            

                                        

                                


                                                                                                                            
                                                                

                                


                                    

                                                                                
                                        
                                        
                                                                            


                                    


                                        

                                                                                                                                    指南针201811271611332头像
                                            指南针201811271611332
                                        



                                        

                                                                                            使用flex，align-items: center;
                                                                                    



                                        

                                            
                                                                                                                                                            发表于  2019-01-17 20:50:12
                                                    
                                                                                            
                                                回复(0)
                                                                                                                                            

                                        

                                


                                                                                                                            
                                                                

                                


                                    

                                                                                
                                        
                                        
                                                                            


                                    


                                        

                                                                                                                                    Funsun头像
                                            Funsun
                                        



                                        

                                                                                            line-height: *px
                                                                                    



                                        

                                            
                                                                                                                                                            发表于  2019-01-12 23:07:03
                                                    
                                                                                            
                                                回复(0)
                                                                                                                                            

                                        

                                


                                                            
                        

                        
                                        

                            

        


                    

                                    

                        

                            

                            

                                提交观点
                            

                        

                    

                            

            

    

          

            
问题信息

            

              

                                      前端工程师
                                      HTML
                                

                                  

                
                                  

                    上传者：小小
                  

                              

                难度：

              

                13条回答
                
                2323浏览
              

            

          

            




















                    

            

                        

  

    

      
      
      
    

    
热门推荐

  

  

    

      
    

  



            

                

            

          
                        

                          

                
相关试题

                

                  
                

              

                





                
        

                                                                

        

    
    
    

    


            
    
    

        

            

                
            

            
扫一扫，把题目装进口袋

        

        

            
求职之前，先上牛客

            

                
                    

                        

                        

                            
                            
扫描二维码，进入QQ群

                        

                    

                
                
                    

                        

                        

                            
                            
扫描二维码，关注牛客公众号