1. 技术文章
  2. CSS常见问题：文本、子元素、图片水平居中和垂直居中的几种方法

CSS常见问题：文本、子元素、图片水平居中和垂直居中的几种方法

由 ＊爱你＆永不变心＊ 提交于 2020-02-08 18:13:21

CSS文本居中

1.单行文本居中

水平居中：text-align:center;
垂直居中：line-height:XXpx;/*line-height与该元素的height的值一致*/

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4. 	<meta charset="UTF-8">
  5. 	<title></title>
  6. 	<style type="text/css">
  7. 	    .box{
  8. 		width: 200px;
  9. 		height: 200px;
  10. 		background: skyblue;
  11. 		text-align: center;/*水平居中*/
  12. 		line-height: 200px;/*垂直居中   行高(line-height)需与该div的高度值(height)一致*/
  13. 		overflow: hidden;/*防止内容超出容器或产生自动换行*/
  14. 	    }
  15. 	</style>
  16.     </head>
  17.     <body>
  18. 	<div class="box">
  19. 	    hello world!
  20. 	</div>
  21.     </body>
  22. </html>

 

2.多行文本居中

父级元素高度不固定时：

可以通过设置padding来让文本看起来垂直居中。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4. 	<meta charset="UTF-8">
  5. 	<title></title>
  6. 	<style type="text/css">
  7. 	    .big{
  8. 		width: 330px;
  9. 		background: burlywood;
  10. 		padding: 30px 10px;
  11. 	    }
  12. 	    .small{
  13. 	    }
  14. 	</style>
  15.     </head>
  16.     <body>
  17. 	<div class="big">
  18. 	    <div class="small">
  19. 		this is a small div.this is a small div.
  20. 		this is a small div.this is a small div.
  21. 	    </div>
  22.         </div>
  23.     </body>
  24. </html>

 

垂直居中与水平居中

1.水平居中显示：margin:0 auto

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4. 	<meta charset="UTF-8">
  5. 	<title></title>
  6. 	<style type="text/css">
  7. 	    .big{width: 200px;height: 200px;background: peru;}
  8. 	    .small{
  9. 		width: 100px;
  10. 		height: 100px;
  11. 		background: skyblue;
  12. 		margin: 0 auto;/*水平居中*/
  13. 	    }
  14.         </style>
  15.     </head>
  16.     <body>
  17. 	<div class="big">
  18. 	    <div class="small">	
  19. 		hello world!
  20. 	    </div>
  21. 	</div>
  22.     </body>
  23. </html>

 

注意：要给居中的元素一个宽度，且该元素一定不能浮动，否者无效。

2.水平居中和垂直居中显示：绝对定位 position:absolute

方式1：
position：absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5. 	<title></title>
  6. 	<style type="text/css">
  7. 	    .big{width: 200px;height: 200px;background: peru;
  8. 		 position: relative;/*relative、absolute、fixed*/
  9. 	    }
  10. 	    div.small{
  11. 		width: 100px;
  12. 		height: 100px;
  13. 		background: skyblue;
  14. 		position: absolute;
  15. 		top: 0; right: 0; bottom: 0; left: 0;
  16. 		margin: auto;
  17. 	    }
  18. 	</style>
  19.     </head>
  20.     <body>
  21. 	<div class="big">
  22. 	    <div class="small">	
  23. 		hello world!
  24. 	    </div>
  25. 	</div>
  26.     </body>
  27. </html>

方式2：
position：absolute;
top: 50%;
left:50%;
margin-top:-(height/2)px;   //值为高度的一半；
margin-left:-(width/2)px;   //值为宽度的一半；

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4. 	<meta charset="UTF-8">
  5. 	<title></title>
  6. 	<style type="text/css">
  7. 	    .big{width: 200px;height: 200px;background: peru;
  8. 		    position: relative;/*relative、absolute、fixed*/
  9. 		}
  10. 		div.small{
  11. 		    width: 100px;
  12. 		    height: 100px;
  13. 		    background: skyblue;
  14. 		    position: absolute;
  15. 		    top: 50%; 
  16. 		    left: 50%;
  17. 		    margin-top: -50px;  /*值为height的一半*/
  18. 		    margin-left: -50px; /*值为width的一半*/
  19. 		    /*
  20. 			top与margin-top实现垂直居中
  21. 			left与margin-left实现水平居中
  22. 		    */
  23. 		}
  24. 	    </style>
  25.     </head>
  26.     <body>
  27. 	<div class="big">
  28. 	    <div class="small">	
  29. 		hello world!
  30. 	    </div>
  31. 	</div>
  32.     </body>
  33. </html>

方式3：
position：absolute;
top: 50%;
left:50%;
transform:translate(-50%,-50%):

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4. 	<meta charset="UTF-8">
  5. 	<title></title>
  6. 	<style type="text/css">
  7. 	    .big{width: 200px;height: 200px;background: peru;
  8. 		    position: relative;/*relative、absolute、fixed*/
  9. 		}
  10. 		div.small{
  11. 		    width: 100px;
  12. 		    height: 100px;
  13. 		    background: skyblue;
  14. 		    position: absolute;
  15. 		    top: 50%; 
  16. 		    left: 50%;
  17. 		    transform:translate(-50%,-50%);
  18. 		    /* 
  19. 			通过设top:50%;transform:translateY(-50%);实现垂直居中
  20. 			通过设left:50%;transform:translateX(-50%);实现水平居中
  21. 		    */
  22. 		}
  23. 	    </style>
  24.     </head>
  25.     <body>
  26. 	<div class="big">
  27. 	    <div class="small">	
  28. 		hello world!
  29. 	    </div>
  30. 	</div>
  31.     </body>
  32. </html>

注意：对于absolute定位的层总是相对于其最近的定义为absolute或relative或fixed的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative或fixed，则其将相对body进行定位。

3.水平居中和垂直居中显示：表格布局 display:table-cell

通过在其父级元素中添加样式：display: table-cell，可以把元素当作表格单元来显示，再添加vertical-align: middle，就使其子元素垂直居中,通过给子元素设置margin:0 auto 实现水平居中。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7. 	.big{
  8. 	    width: 300px;
  9. 	    height: 200px;
  10. 	    background: burlywood;
  11. 	    display: table-cell;
  12. 	    vertical-align: middle;  /*子元素垂直居中*/
  13.  
  14. 	}
  15. 	p{
  16. 	    width: 100px;
  17. 	    height: 50px;
  18. 	    background: skyblue;
  19. 	    margin: 0 auto;  
  20.             /*自身相对于父级水平居中,只对块级元素或者行内元素设display:block起作用*/
  21. 	    }
  22. 			
  23. 	</style>
  24.     </head>
  25.     <body>    
  26.         <div class="big">
  27. 	    <p></p>
  28.         </div>
  29.     </body>
  30. </html>

4.水平居中和垂直居中显示：弹性布局display:flex

通过在其父级元素中添加样式：
display: flex;
justify-content:center;  //使子元素水平居中
align-items:center;   //使子元素垂直居中

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7. 	    div{
  8. 	        width: 200px;
  9. 	        height: 100px;
  10. 	        background: skyblue;
  11. 	        display: flex;
  12. 	        justify-content: center; /*水平居中*/ 
  13. 	        align-items: center;  /*垂直居中*/
  14. 	    }
  15. 	    p{
  16.                 width:100px;
  17.                 height:50px;
  18. 	        background: pink;
  19. 	    }
  20.         </style>
  21.     </head>
  22.     <body>
  23. 	<div class="big">
  24. 	    <p>子元素</p>
  25. 	</div>
  26.     </body>
  27. </html>

5.水平居中和垂直居中显示：display:box

通过在其父级元素中添加样式：
display: box;
display: -webkit-box;
-webkit-box-pack:center; /*实现水平居中*/
-webkit-box-align:center; /*实现垂直居中*/

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7. 	    div{
  8. 	        width: 200px;
  9. 	        height: 100px;
  10. 	        background: skyblue;
  11. 	        display: box;
  12. 		display: -webkit-box;
  13. 		-webkit-box-pack:center; /*实现水平居中*/
  14. 		-webkit-box-align:center; /*实现垂直居中*/
  15. 	    }
  16. 	    p{
  17.                 width:100px;
  18.                 height:50px;
  19. 	        background: pink;
  20. 	    }
  21.         </style>
  22.     </head>
  23.     <body>
  24. 	<div class="big">
  25. 	    <p>子元素</p>
  26. 	</div>
  27.     </body>
  28. </html>

图片居中

水平居中：
       在其父级元素添加样式text-align:center
垂直居中：
       1.在其父级元素添加padding样式
       2. 在图片<img>标签前面添加一个行内元素，如<b></b>
       给<b>标签样式：height:100%;display:inline-block; vertical-align: middle;
       给图片<img>标签添加样式：vertical-align: middle;
       由于图片大小不能大于div层大小，因此最好给图片<img>标签设置max-width,max-height样式。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5. 	<title></title>
  6. 	<style type="text/css">
  7. 	    .box{
  8. 		width: 200px;
  9. 		height: 200px;
  10. 		background: skyblue;
  11. 		text-align: center;/*水平居中*/
  12. 		box-sizing: border-box;
  13. 	    }
  14. 	    b{height: 100%;display: inline-block;vertical-align: middle;}
  15. 	    img{vertical-align: middle;max-width: 150px;max-height: 150px;}
  16. 	</style>
  17.     </head>
  18.     <body>
  19. 	<div class="box">
  20. 	    <b></b>
  21. 	    <img src="img/touxiang.jpg"/>
  22. 	</div>
  23.     </body>
  24. </html>

 

 

CSS文本居中

标签
css垂直居中
html居中
line-height
css
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!