CSS居中 - GitPress.io

CSS居中

#居中的分类

###一，块级元素内的内联元素水平居中，text-align: center;

div.box里面有文字，让文字在盒子内居中

<style type="text/css">
  .box {
      border: 1px solid red;
      text-align: center;
  }
</style>
<div class="box">
  hello deejay
</div>

盒子内部是按钮的情况

<style type="text/css">
  .box {
      border: 1px solid red;
      text-align: center;
  }

</style>

<div class="box"> <a href="#">click me!</a> <a href="#">click me!</a> </div> ###二，固定宽度的块级元素水平居中，margin:0 auto <style type="text/css"> .box { border: 1px solid red; text-align: center; /让a链接也居中/ } .box2 { width: 500px; border: 1px solid green; margin: 0 auto; /固定宽度的块级元素居中/ } </style> <div class="box"> <div class="box2"> <a href="#">Click me!</a> </div> </div> ```

###三，盒子内部的文字垂直居中

可以设置padding，使得上下padding相等，就做到了垂直居中

<style type="text/css">
    .box{
        border: 1px solid red;
        padding: 30px 0; /*不设置高度，box里面的内容不管有多少行都是垂直居中的，只要设置上下padding相等。*/
    }
</style>
<div class="box">
    <p>hello deejay ello deejay</p>
    <p>hello deejay ello deejay</p>
    <p>hello deejay ello deejay</p>
</div>

针对单行文本的垂直居中可以通过设置height=line-height来实现单行文本的居中

###四，绝对水平垂直居中对于没有固定的宽高的父元素要进行子元素的垂直水平居中，可以采用绝对定位，left: 50%,结合负的margin-left来进行定位。

<style type="text/css">
    *{
        margin: 0;          /*初始化样式，不然body会有默认margin等*/
        padding: 0;
    }
    body,html{             /*box要宽高都设置100%全屏的话，要将其父元素都设置成宽高100%，本例中就是body和html*/
        width: 100%;
        height: 100%;
    }
    .box{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4);
        position: relative;
    }
    .box2{
        width: 500px;;
        height: 400px;
        background: green;
        position: absolute;
        left: 50%;
        margin-left: -250px;  /*自身width的一半*/
        top: 50%;
        margin-top: -200px;  /*同理，自身height的一半*/

    }
</style>
<div class="box">
    <div class="box2">
        <h1>hello,deejay</h1>
    </div>
</div>

上述例子中，子元素的宽高并没有固定的情况：

可以使用CSS3的属性transform: translate(-50%,-50%)；来进行居中

<style type="text/css">
    *{
        margin: 0;          /*初始化样式，不然body会有默认margin等*/
        padding: 0;
    }
    body,html{             /*box要宽高都设置100%全屏的话，要将其父元素都设置成宽高100%，本例中就是body和html*/
        width: 100%;
        height: 100%;
    }
    .box{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4);
        position: relative;
    }
    .box2{
        /*width: 500px;*/
        /*height: 400px;*/
        background: green;
        position: absolute;
        transform: translate(-50%,-50%);
        left: 50%;
        /*margin-left: -250px;  !*自身width的一半*!*/
        top: 50%;
        /*margin-top: -200px;  !*同理，自身height的一半*!*/

    }
</style>
<div class="box">
    <div class="box2">
        <h1>hello,deejay</h1>
    </div>
</div>