CSS-水平居中、垂直居中、水平垂直居中

一、水平居中

水平居中可分爲行內元素水平居中和塊級元素水平居中

1.1 行內元素水平居中

這裏行內元素是指文本text、圖像img、按鈕超連接等，只需給父元素設置text-align:center便可實現。

.center{
        text-align:center;
}
<div class="center">水平居中</div>

1.2 塊級元素水平居中

• 定寬塊級元素水平居中
  只需給須要居中的塊級元素加margin:0 auto便可，但這裏須要注意的是，這裏塊狀元素的寬度width值必定要有

  .center{
        width:200px;
        margin:0 auto;
        border:1px solid red;
    }
    <div class="center">水平居中</div>

• 不定寬塊級元素水平居中
  不定寬，即塊級元素寬度不固定
  方法1：設置table

  經過給要居中顯示的元素，設置display:table，而後設置margin:0 auto來實現

  .center{
        display:table;
        margin:0 auto;
        border:1px solid red;
    }
    <div class="center">水平居中</div>

  方法2：設置inline-block（多個塊狀元素）
  子元素設置inline-block，同時父元素設置text-align:center

  .center{
        text-align:center;
    }
    .inlineblock-div{
        display:inline-block;
    }
    <div class="center">
        <div class="inlineblock-div">1</div>
        <div class="inlineblock-div">2</div>
    </div>

  方法3：設置flex佈局
  只需把要處理的塊狀元素的父元素設置display:flex,justify-content:center;

  .center{
        display:flex;
        justify-content:center;
    }
    <div class="center">
        <div class="flex-div">1</div>
        <div class="flex-div">2</div>
    </div>

  方法4：position + 負margin；
  方法5：position + margin：auto；
  方法6：position + transform；

  注：這裏方法四、五、6同下面垂直居中同樣的道理，只不過須要把top/bottom改成left/right，在垂直居中部分會詳細講述。

二、垂直居中

2.1 單行文本垂直居中

• 設置paddingtop=paddingbottom；或
• 設置line-height=height；

2.2 多行文本垂直居中

經過設置父元素table，子元素table-cell和vertical-align
vertical-align:middle的意思是把元素放在父元素的中部

2.3 塊級元素垂直居中

方法1：flex佈局
在須要垂直居中的父元素上，設置display:flex和align-items：center
要求：父元素必須顯示設置height值

顯示效果：

方法2：利用position和top和負margin（需知寬高）
一、設置元素爲absolute/relative/fixed
二、margin=負一半

效果以下：

方法3：利用position和top/bottom和margin:auto（注意不是margin:0 auto）
一、position：absolute/relative/fixed
二、top/bottom：0
三、margin：auto

效果以下：

方法4：利用position和top和transform
transform中translate偏移的百分比就是相對於元素自身的尺寸而言的。

效果以下：

注：

• 上述的塊級垂直居中方法，稍加改動，便可成爲塊級水平居中方法，如top/bottom換成left/right
• transform方法，可用於未知元素大小的居中

三、水平垂直居中

方法1：絕對定位+margin:auto

div{
        width: 200px;
        height: 200px;
        background: green;
        
        position:absolute;
        left:0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

方法2：絕對定位+負margin

div{
        width:200px;
        height: 200px;
        background:green;
        
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }

方法3：絕對定位+transform

div{
        width: 200px;
        height: 200px;
        background: green;
        
        position:absolute;
        left:50%;    /* 定位父級的50% */
        top:50%;
        transform: translate(-50%,-50%); /*本身的50% */
    }

方法4：flex佈局

.box{
         height:600px;  
         
         display:flex;
         justify-content:center;  //子元素水平居中
         align-items:center;      //子元素垂直居中
           /* aa只要三句話就能夠實現不定寬高水平垂直居中。 */
    }
    .box>div{
        background: green;
        width: 200px;
        height: 200px;
    }

方法5：table-cell實現居中

• 設置 display:table-cell; text-align:center;vertical-align: middle;