【CSS】margin:0 auto;——使用条件/应用场景/不生效无效果的原因

最新推荐文章于 2025-04-04 23:39:01 发布

置顶不想加班的虎砸

最新推荐文章于 2025-04-04 23:39:01 发布

阅读量6.4w

点赞数 41

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_39068791/article/details/80635316

版权

CSS 专栏收录该内容

7 篇文章

订阅专栏

margin:0 auto；在不同场景下生效条件如下：

块级元素：给定要居中的块级元素的宽度。

行内元素：①设置display:block；②给定要居中的行内元素的宽度。（行内元素设置成块级元素后可以对其宽高进行设置）

行内块元素：设置display:block。（如input、button、img等元素，自带宽度可以不用设置其宽度）

注：

①可以通过对块级元素设置 text-align：center；的方式来实现内联元素（如文本、图片）居中

②margin:0 auto;可以使盒子居中，text-align:center;可以使此盒子内的内联元素居中，故有时需要两者结合使用才能使得盒子及其中文本一起居中。

例如，下例中标题要想整个居中，

          	   <div class="title">
          	   	   <h2>假装我有标题</h2>
          	   	   <h6>
          	   	   	2015年08月08日 18:19  
					<span>新浪体育</span> 微博 我有话说（<span>106712</span>人参与） 
					收藏本文
          	   	   </h6>
          	   </div>

一要先让盒子在页面中居中margin:0 auto;

二是让盒子内部的文本居中text-align:center;

完整代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>			
			  *{
			  	 margin:0;
			  	 padding:0;
			  }
			 .box{
			 	  width:640px;
			 	  height:585px;
			 	  border:1px solid #BBBBBB;
			 	  border-top:3px solid #094683;
			 	  margin:10px auto;
			 }

			 .title{
			 	 width:600px;
                                 margin: 0 auto;         /*使盒子居中*/
                                 text-align: center;     /*使文本在盒子居中，可以尝试把这两句分别注释看下实现效果就理解了！*/
			 	 margin-top:26px;
			 	 border:1px solid #CCCCCC;
				 padding-bottom:10px;

			 }

			 .title h2{
			 	 font-weight:normal;
			 	 margin-bottom:10px;
			 }

			 .title h6{
			 	 font-size:12px;
			 	 font-weight:normal;
			 	 color:#999999;
			 }

			 .title span{
			 	 color:#990000;
			 }

			 .photo{
			 	 margin:0 auto;
			 	 width:567px;
			 	 height:427px;
			 	 margin-top: 10px;
			 }
        </style>
    </head>
    <body>
          <div class="box">          	
          	   <div class="title">
          	   	   <h2>我是标题</h2>
          	   	   <h6>
          	   	   	2015年08月08日 18:19  <span>新浪体育</span> 微博 我有话说（<span>106712</span>人参与） 收藏本文
          	   	   </h6>
          	   </div>
          	   <div class="photo">
          	   	  <img src="tiyu.png">
          	   </div>
          </div>
    </body>
</html>