在HTML中关于元素居中有哪些需要注意的事项

  不使用定位
 
  水平居中:text-align=center;(可继承)
 
  竖直居中:margin:0auto;(块级元素)
 
  其他居中:1.文字居中:父元素设置高子元素设置高line-height=height(父元素)
 
  2.图片居中:vertical-aign:middle;<--必须放在图片元素中
 
  .first{
 
  width:300px;
 
  height:100px;
 
  background-color:black;
 
  color:white;
 
  text-align:center;
 
  margin:0auto;//针对块级元素
 
  }
 
  <divclass="first">
 
  不使用定位(1)
 
  </div>
 
  .second{
 
  width:300px;
 
  height:100px;
 
  background-color:green;
 
  }
 
  .s_child{
 
  width:150px;
 
  line-height:100px;
 
  }
 
  <divclass="second">
 
  <divclass="s_child">
 
  不使用定位(2)
 
  </div>
 
  </div>
 
  2.定位居中
 
  a.父元素高度固定
 
  父元素:相对定位
 
  子元素:绝对定位
 
  top:50%(父元素高度的一半)
 
  left:50%
 
  margin-top:自己的高度一半;(加负号)
 
  margin-left:自己宽度的一半;(加负号)
 
  
 
  .dw_one{
 
  width:600px;
 
  height:300px;
 
  position:absolute;
 
  background:black;
 
  }
 
  .dw_one_child{
 
  background:white;
 
  position:relative;
 
  width:50px;
 
  height:50px;
 
  top:50%;
 
  left:50%;
 
  margin-top:-25px;
 
  margin-left:-25px;
 
  }
 
  <divclass="dw_one">
 
  <divclass="dw_one_child">
 
  a
 
  </div>
 
  </div>
 
  b.父元素高度不固定
 
  
 
  .wrapper{
 
  width:600px;
 
  height:600px;
 
  }
 
  .dw_two{
 
  width:100%;
 
  height:100%;
 
  position:absolute;
 
  background:black;
 
  }
 
  .dw_two_child{
 
  background:white;
 
  position:relative;
 
  top:50%;
 
  left:50%;
 
  width:100px;
 
  height:100px;
 
  transform:translate(-50%,-50%);
 
  -moz-transform:translate(-50%,-50%);
 
  -ms-transform:translate(-50%,-50%);
 
  -o-transform:translate(-50%,-50%);
 
  -webkit-transform:translate(-50%,-50%);
 
  }
 
  <divclass="wrapper">
 
  <divclass="dw_two">
 
  <divclass="dw_two_child">
 
  a
 
  </div>
 
  </div>
 
  </div>
 
  3.关于多行文本的居中
 
  使用display:table;display:table-cell;
 
  vertical-align:middle;居中
 
  
 
  #outer{
 
  width:200px;
 
  height:200px;
 
  background:#cccccc;
 
  display:table;
 
  _position:relative;//"_"为了兼容IE6
 
  }
 
  #inner{
 
  display:table-cell;
 
  vertical-align:middle;
 
  _position:absolute;
 
  _top:50%;
 
  }
 
  #content{
 
  _position:relative;
 
  _top:-50%;
 
  }
 
  <divid="outer">
 
  <divid="inner">
 
  <divid="content">
 
  Paradise_追逐者所写的居中问题总结之我见
 
  </div>
 
  </div>
 
  </div>





本文转载自中文网

 

推荐阅读