四种纯css实现页面元素水平垂直居中的方法

  • 2017-10-17
  • 377
  • 0

在页面很多地方都需要将某个元素水平和垂直都居中放置,而且在一些公司面试前端的时候,往往会有这样的题目,比如“用至少两种方法实现纯css让元素水平垂直居中效果”,这个话题算老生常谈了。今天主要讨论四种常用的纯css实现元素水平垂直居中的方案:

1、如果要居中的元素已知宽高,可以利用定位和负外边距来实现,具体原理不啰嗦了,大家自己看代码:

<div id="box"></div>
 <style type="text/css">
  * {
     padding: 0;
     margin: 0;
  }
  #box {
     width: 300px;
     height: 200px;
     background: dodgerblue;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-left: -150px;/*元素高度的一半*/
     margin-top: -100px;/*元素高度的一半*/
  }
 </style>

2、如果元素的宽高已知,还可以这么写(这个写法必须加具体高度):

<div id="box"></div>
 <style type="text/css">
  * {
     padding: 0;
     margin: 0;
  }
  #box {
     width: 300px;
     height: 200px;
     background: dodgerblue;
     margin: auto;
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     top: 0;
  }
 </style>

 

3、如果元素宽高未知,可以这样写(利用了css3的属性,不兼容低版本IE):

<div id="box">我是用来充数的测试文字,我是用来充数的测试文字,我是用来充数的测试文字,我是用来充数的测试文字,我是用来充数的测试文字,我是用来充数的测试文字,我是用来充数的测试文字,我是用来充数的测试文字,我是用来充数的测试文字,我是用来充数的测试文字,我是用来充数的测试文字,我是用来充数的测试文字,我是用来充数的测试文字</div>
 <style type="text/css">
  * {
     padding: 0;
     margin: 0;
  }
  #box {
     width: 300px;
     background: dodgerblue;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
  }
 </style>

4、如果让某个父级区域(非body)中的子元素水平垂直居中,也可以这样写:

<style type="text/css">
 *{
    padding: 0;
    margin: 0;
 }
 #out{
    width: 800px;
    height: 550px;
    border: 2px solid orange;
    margin: 10px auto;
    /*flex弹性盒模型居中法*/
    display: flex;
    /*让子元素在主轴上居中*/
    justify-content: center;
    /*让子元素在交叉轴上居中*/
    align-items: center;
 }
 #hd{
    width: 400px;
    background: dodgerblue;
 }
 </style>
 <div id="out">
 <div id="hd">后盾人 人人做后盾!后盾人 人人做后盾!后盾人 人人做后盾!后盾人 人人做后盾!后盾人 人人做后盾!后盾人 人人做后盾!后盾人 人人做后盾!后盾人 人人做后盾!后盾人 人人做后盾!后盾人 人人做后盾!</div> 
 </div>

当然,还有其他很多方法,以上四种是比较常用的而已。给大家推荐一篇文章,有兴趣的同学可以学习下:盘点8种CSS实现垂直居中水平居中的绝对定位居中技术(http://blog.csdn.net/freshlover/article/details/11579669)

感谢打赏!
微信
支付宝

评论

还没有任何评论,你来说两句吧