CSS垂直水平居中方式大全(二)----水平垂直居中

公众号_码农致富
187 阅读14分钟
原文链接： blog.csdn.net

1.利用绝对定位+transform(不固定宽高水平垂直居中)


示例:

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8" >  
  5.         <title>居中</title >  
  6.         <style>  
  7.             #box {  
  8.                 position: relative;  
  9.                 width: 500px;  
  10.                 height: 400px;  
  11.                 background: #faebcc;  
  12.             }  
  13.             #child {  
  14.                 position: absolute;  
  15.                 top: 50%;  
  16.                 left: 50%;  
  17.                 transform: translate(-50%);  
  18.             }  
  19.         </style>  
  20.     </head>  
  21.     <body>  
  22.   
  23.                 <div id= "box">  
  24.                     <div id= "child">Hello world</div>  
  25.                 </div>  
  26.           
  27.     </body>  
  28. </html>   
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中</title>
		<style>
			#box {
			    position: relative;
			    width: 500px;
			    height: 400px;
			    background: #faebcc;
			}
			#child {
			    position: absolute;
			    top: 50%;
			    left: 50%;
			    transform: translate(-50%);
			}
		</style>
	</head>
	<body>

				<div id="box">
				    <div id="child">Hello world</div>
				</div>
		
	</body>
</html>


效果:



2.利用绝对定位+margin(.child宽高固定)


示例:

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8" >  
  5.         <title>居中</title >  
  6.         <style>  
  7.             #box {  
  8.                 position: relative;  
  9.                 width: 500px;  
  10.                 height: 400px;  
  11.                 background: #faebcc;  
  12.             }  
  13.             #child {  
  14.                 position: absolute;  
  15.                 top: 50%;  
  16.                 left: 50%;  
  17.                 width: 100px;  
  18.                 height: 80px;  
  19.                 background: #999999;  
  20.                 margin: -40px 0 0 -50px;/*负值取宽、高的一半*/  
  21.             }  
  22.         </style>  
  23.     </head>  
  24.     <body>  
  25.   
  26.                 <div id= "box">  
  27.                     <div id= "child">Hello world</div>  
  28.                 </div>  
  29.           
  30.     </body>  
  31. </html>   
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中</title>
		<style>
			#box {
			    position: relative;
			    width: 500px;
			    height: 400px;
			    background: #faebcc;
			}
			#child {
			    position: absolute;
			    top: 50%;
			    left: 50%;
			    width: 100px;
			    height: 80px;
			    background: #999999;
			    margin: -40px 0 0 -50px;/*负值取宽、高的一半*/
			}
		</style>
	</head>
	<body>

				<div id="box">
				    <div id="child">Hello world</div>
				</div>
		
	</body>
</html>


效果:


3.利用定位与margin:auto


示例:

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8" >  
  5.         <title>居中</title >  
  6.         <style>  
  7.             #box {  
  8.                 position: relative;  
  9.                 width: 500px;  
  10.                 height: 400px;  
  11.                 background: #faebcc;  
  12.             }  
  13.             #child {  
  14.                 position: absolute;      
  15.                 width: 100px;  
  16.                 height: 80px;  
  17.                 background: #DDDDDD;  
  18.                 top: 0;    right: 0;    bottom: 0;    left: 0;    margin: auto;  
  19.             }  
  20.         </style>  
  21.     </head>  
  22.     <body>  
  23.   
  24.                 <div id= "box">  
  25.                     <div  id="child">Hello world</div>  
  26.                 </div>  
  27.           
  28.     </body>  
  29. </html>   
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中</title>
		<style>
			#box {
			    position: relative;
			    width: 500px;
			    height: 400px;
			    background: #faebcc;
			}
			#child {
			    position: absolute;    
			    width: 100px;
			    height: 80px;
			    background: #DDDDDD;
			    top: 0;    right: 0;    bottom: 0;    left: 0;    margin: auto;
			}
		</style>
	</head>
	<body>

				<div id="box">
				    <div id="child">Hello world</div>
				</div>
		
	</body>
</html>

效果:



4.利用display:table-cell

CSS中有一个用于竖直居中的属性vertical-align，但只有当父元素为td或者th时，这个vertical-align属性
才会生效，对于其他块级元素，例如 div、p等，默认情况下是不支持vertical-align属性的，设置块级元素的
display类型为table-cell，激活vertical-align属性，但display:table-cell存在兼容性问题，
所以这种方法没办法跨浏览器兼容。

示例:

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8" >  
  5.         <title>居中</title >  
  6.         <style>  
  7.             #box {  
  8.                 display: table-cell;  
  9.                 vertical-align: middle;/*垂直*/  
  10.                 text-align: center;/*水平*/  
  11.                 width: 500px;  
  12.                 height: 400px;  
  13.                 background: #faebcc;  
  14.             }  
  15.             #child {  
  16.                 display: inline-block;  
  17.                 width: 100px;  
  18.                 height: 80px;  
  19.                 background: #f65f57;  
  20.             }  
  21.         </style>  
  22.     </head>  
  23.     <body>  
  24.   
  25.                 <div id= "box">  
  26.                     <div id= "child">Hello world</div>  
  27.                 </div>  
  28.           
  29.     </body>  
  30. </html>   
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中</title>
		<style>
			#box {
			    display: table-cell;
			    vertical-align: middle;/*垂直*/
			    text-align: center;/*水平*/
			    width: 500px;
			    height: 400px;
			    background: #faebcc;
			}
			#child {
			    display: inline-block;
			    width: 100px;
			    height: 80px;
			    background: #f65f57;
			}
		</style>
	</head>
	<body>

				<div id="box">
				    <div id="child">Hello world</div>
				</div>
		
	</body>
</html>

效果:


5.页面居中


方法一:


示例:

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8" >  
  5.         <title>居中</title >  
  6.         <style>  
  7.             #child {  
  8.                 width:100px;  
  9.                 height:100px;  
  10.                 background:aqua;  
  11.                 position:absolute;  
  12.                 top:0;  
  13.                 left:0;  
  14.                 right:0;  
  15.                 bottom:0;  
  16.                 margin:auto;  
  17.             }  
  18.         </style>  
  19.     </head>  
  20.     <body>  
  21.   
  22.                <div id= "child">Hello world</div>  
  23.           
  24.     </body>  
  25. </html>   
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中</title>
		<style>
			#child {
		        width:100px;
		        height:100px;
		        background:aqua;
		        position:absolute;
		        top:0;
		        left:0;
		        right:0;
		        bottom:0;
		        margin:auto;
			}
		</style>
	</head>
	<body>

	           <div id="child">Hello world</div>
		
	</body>
</html>


效果:



方法二:


示例:

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8" >  
  5.         <title>居中</title >  
  6.         <style>  
  7.           #child {  
  8.                 width:100px;  
  9.                 height:100px;  
  10.                 background:aqua;  
  11.                 position:absolute;  
  12.                 top:50%;  
  13.                 left:50%;  
  14.                 margin-left:-50px;  
  15.                 margin-bottom:-50px;  
  16.           }  
  17.         </style>  
  18.     </head>  
  19.     <body>  
  20.   
  21.     <div id="child">Hello world </div>  
  22.           
  23.     </body>  
  24. </html>   
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中</title>
		<style>
		  #child {
	            width:100px;
	            height:100px;
	            background:aqua;
	            position:absolute;
	            top:50%;
	            left:50%;
	            margin-left:-50px;
	            margin-bottom:-50px;
		  }
		</style>
	</head>
	<body>

	<div id="child">Hello world</div>
		
	</body>
</html>



效果:



方法三:


示例:

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8" >  
  5.         <title>居中</title >  
  6.         <style>  
  7.           #child {  
  8.                 background:aqua;  
  9.                 position: absolute;   
  10.                 width: 6em;   
  11.                 height: 6em;  
  12.                 top: calc(50% - 3em);   
  13.                 left: calc(50% - 3em);   
  14.           }  
  15.         </style>  
  16.     </head>  
  17.     <body>  
  18.   
  19.               <div id= "child">Hello world</div>  
  20.           
  21.     </body>  
  22. </html>   
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中</title>
		<style>
		  #child {
	            background:aqua;
	            position: absolute; 
	            width: 6em; 
	            height: 6em;
	            top: calc(50% - 3em); 
	            left: calc(50% - 3em); 
		  }
		</style>
	</head>
	<body>

	          <div id="child">Hello world</div>
		
	</body>
</html>



效果:


方法四:


示例:

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8" >  
  5.         <title>居中</title >  
  6.         <style>  
  7.           #child {  
  8.             background: #999999;  
  9.                 position: absolute;   
  10.                 top:50%;  
  11.                 left:50%;  
  12.                 transform:translate(-50% -50%);  
  13.           }  
  14.         </style>  
  15.     </head>  
  16.     <body>  
  17.   
  18.         <div id="child" >Hello world</div>  
  19.           
  20.     </body>  
  21. </html>   
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中</title>
		<style>
		  #child {
			background: #999999;
		        position: absolute; 
		        top:50%;
		        left:50%;
		        transform:translate(-50% -50%);
		  }
		</style>
	</head>
	<body>

		<div id="child">Hello world</div>
		
	</body>
</html>



效果:


avatar
文章
阅读
粉丝