css水平垂直居中

最新推荐文章于 2024-06-03 18:53:48 发布
最新推荐文章于 2024-06-03 18:53:48 发布
阅读量230 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dreamcarp/article/details/74938740
版权

整理一下关于块和文字的水平垂直居中，这些是我们平时调样式时经常遇到的。


dom结构，在浏览器中实现块及其文字的水平垂直居中

<body>
    <div class="parent"></div>
</body>
共同样式： 

* {
    margin: 0;
    padding: 0;
}

方法1:

.parent {
    width: 200px;
    height: 200px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border: 1px solid;
}
 

方法2:
 

.parent {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -100px;
    border: 1px solid
}
方法3（不知宽高的情况下）:
.parent {
    width: 50%;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid;
}
方法4:
body {
    display:flex;
    justify-content:center;
    align-items: center;
    height: 400px;
}
.parent {
    width: 200px;
    height: 200px;
    border: 1px solid;
}
方法5:
body{
    display: table-cell;
    vertical-align: middle;
    width: 500px;
    height: 500px;
    border: 1px solid;
}
.parent {
    width: 200px;
    height: 200px;
    border: 1px solid;
    margin: 0 auto;
}
 

 

 

 

 


 
 


 

                

        

        

    




    

      

        

            

              
                
                  dreamcarp
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
16种CSS水平垂直居中方法

				
			

			

				

					weixin_45709829的博客
				

				

					03-22
					
					3万+
					
				

			

		

		

			
				
16种css水平垂直居中方法以及应用（文字、图片）
一、垂直居中
1、行内元素
基本思想：单行文本子元素line-height 值为父元素 height 值
.parent {
    height: 200px;
}

.son {
    line-height: 200px;
}

2、块级元素
2.1行内块级元素
基本思想：元素是行内块级，使用display: inline-block, vertical-align: middle+伪元素处于容器中央
兼容性：支持IE7
.parent::afte

			
		

	



                

              
                



	

		

			

				
					
CSS水平垂直居中

				
			

			

				

					qq_51130780的博客
				

				

					01-14
					
					609
					
				

			

		

		

			
				
CSS中常见的水平垂直居中的方案

			
		

	



                


  
              

                


	

		

			

				
					
css元素水平垂直居中

					
最新发布

				
			

			

				

					博哥的二进制世界
				

				

					06-03
					
					1240
					
				

			

		

		

			
				
/图片与文字垂直居中，但会有少量偏差，再通过。在应用一的基础上，给子项（元素） 添加 vertical-align: middle;//子元素相对父元素水平（主轴）居中。//子元素相对父元素垂直（交叉轴）居中。这种写法，在没有指定子元素宽高的情况下，也能让其在父容器中垂直居中。//给父元素加，弹性布局。margin-left:- 自身宽度一半;margin-top:-自身高度一半;

			
		

	





	

		

			

				
					
css水平垂直居中四种常用方式

				
			

			

				

					CSDdas的博客
				

				

					05-10
					
					3884
					
				

			

		

		

			
				
css水平垂直居中四种常用方式

			
		

	



		

			
		



	

		

			

				
					
css 水平垂直居中

				
			

			

				

					zzzzoe_的博客
				

				

					01-15
					
					772
					
				

			

		

		

			
				
相对于页面对块元素进行垂直居中


.login {
  position: absolute;;
  width: 5rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}




			
		

	





	

		

			

				
					
CSS水平垂直居中常见方法总结

					
热门推荐

				
			

			

				

					小牛肉_
				

				

					12-02
					
					11万+
					
				

			

		

		

			
				
css元素水平垂直居中

			
		

	





	

		

			

				
					
CSS常用水平垂直居中的几种方法

				
			

			

				

					qq_33721778的博客
				

				

					12-28
					
					2万+
					
				

			

		

		

			
				
CSS水平垂直居中一、利用margin:auto二、利用position: absolute三级目录
一、利用margin:auto
元素有宽度和高度时，利用margin:auto设置元素水平垂直居中：

HTML代码如下：
<div class="div1">
	<div class="center"></div>
</div>

CSS代码如下：
.div1 {
  background-color: #eee;
  width: 200px;
  hei

			
		

	





	

		

			

				
					
CSS 水平垂直居中的方式

				
			

			

				

					专注于大数据方向，区块链，前后端，数据可视化，人工智能等领域
				

				

					06-02
					
					1316
					
				

			

		

		

			
				
在实际使用最好测试下最低版本是否支持对应的实现方式，尽量选各个浏览器支持比较好的，或者最常见的实现方式。浏览器兼容性：最新主流浏览器基本上兼容，对于老版本浏览器可能会有兼容性问题。兼容性：基本都支持，只是书写起来比较繁琐，多层嵌套。浏览器兼容性：主流浏览器基本上都支持的。

			
		

	





	

		

			

				
					
【Web】CSS水平垂直居中常见方法总结

				
			

			

				

					沙师弟专栏
				

				

					05-05
					
					2万+
					
				

			

		

		

			
				
文章目录一、简介二、元素水平居中三、元素水平垂直居中3.1 position 元素已知宽度3.2 position transform 元素未知宽度3.3 flex布局3.4 table-cell布局
一、简介
说明：本篇文章只是总结一些方法，例子用到的各个元素属性不做解释，详情请看MDN文档，非常的详尽，例子在chrome浏览器下完全好使，IE这个渣渣。
本文出现的错误，请大佬们及时指正，人非圣...

			
		

	





	

		

			

				
					
css水平垂直居中八种方法

				
			

			

				

					wwtx2048的博客
				

				

					12-03
					
					160
					
				

			

		

		

			
				
css水平垂直居中八种方法

			
		

	





	

		

			

				
					
移动端页面撑满屏幕宽高，css设置

				
			

			

				

					dreamcarp的专栏
				

				

					04-01
					
					9202
					
				

			

		

		

			
				
移动端页面撑满屏幕宽高，css样式：
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;


			
		

	





	

		

			

				
					
IE浏览器下缩放后图片中的文字显示不清晰

				
			

			

				

					dreamcarp的专栏
				

				

					04-01
					
					4707
					
				

			

		

		

			
				
在做轮播图的过程中，使用大图858＊1262px。缩放后在mac下的Chrome，Safari下图片是清晰的，但windows下Chrome浏览器中图片不是很清晰，但能接受范围内，IE浏览器中图片中的文字很难辨认。




尝试解决方案：



把png图片改为jpg格式把大图切成缩放后图片所占位置的大小190*275px把轮播图的弹窗加大，图片所占位置变大，width:40%把

			
		

	





	

		

			

				
					
iphone7中在块与块之间设置margin-bottom没有撑开，无法实现滚动效果

				
			

			

				

					dreamcarp的专栏
				

				

					05-09
					
					1197
					
				

			

		

		

			
				
在项目中，遇到了iphone7 的兼容性问题：iphone7中在块与块之间设置margin-bottom没有撑开，无法实现滚动效果

解决方案：把块与块之间margin-bottom改为块的padding-bottom属性，就实现了滚动效果。至于为什么这样设置，目前我还不太清楚。

			
		

	





	

		

			

				
					
ehcarts图表没有显示出来问题

				
			

			

				

					dreamcarp的专栏
				

				

					05-09
					
					915
					
				

			

		

		

			
				
浏览器有warning：cannot get height and width.

解决方法：
var worldMapContainer = document.querySelector('.echarts-content');
// 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
var resizeWorldMapContainer = function () {
    

			
		

	





	

		

			

				
					
实现一个左边宽度固定，右边自适应

				
			

			

				

					dreamcarp的专栏
				

				

					07-25
					
					538
					
				

			

		

		

			
				
dom结构：

body>
    div class="left">hellodiv>
    div class="right">worlddiv>
body>


方法一：

.left {
    width: 100px;
    height: 100px;
    border: 1px solid;
    position: absolute;
}
.right {

			
		

	





	

		

			

				
					
z-index的用法

				
			

			

				

					dreamcarp的专栏
				

				

					06-23
					
					462
					
				

			

		

		

			
				
需要当前层比其他层高的时候可以用z-index.用的时候注意，z-index对普通文档流中的元素不起作用，必须设置定位。
可以设置：
{
position:relative;
z-index:1;
}
或
{
position:absolute;
z-index:1;
}
或
{
position:fixed;
z-index:1
}

			
		

	





	

		

			

				
					
一列多个标签居中显示

				
			

			

				

					dreamcarp的专栏
				

				

					05-09
					
					443
					
				

			

		

		

			
				
1.一列多个标签，居中显示，当其中一个标签隐藏时，其他在html中居中显示

ejs代码：


div class="btns">
    a class="btn btn-list js-to-list">查看我的推广a>
    a class="btn btn-add js-to-add">在该花费限额下添加门店推广a>
    a class="btn btn-continue 

			
		

	





	

		

			

				
					
清除浮动的6中常用方法

				
			

			

				

					dreamcarp的专栏
				

				

					07-12
					
					359
					
				

			

		

		

			
				
首先了解一下浮动的原理：给元素设置float属性后，该元素会脱离文档流，进行左右浮动，紧贴着父元素的左右边框。此元素空出的位置，由后续元素填充上去。


dom结构：

div class="container">
    div class="left">hellodiv>
    div class="right">worlddiv>
div>

style样式：

* {


			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值