div中的內容水平垂直居中

1. div高度自適應的情況

    div在不設置高度的時候，會被里面的內容撐開，內容自動填充在div中，無論是一行內容還是多行內容，此時不需要設置垂直居中，內容自動在中間的，

    想要看的更直觀些，只需要加上padding元素，內容四周便會留下空白，實現水平垂直居中的效果

    css代碼如下：

.demo{
    width: 200px;
    border: 1px solid red;
    padding: 20px;
 }

 HTML代碼如下：

<div class="demo">
        this is a test of margin 
        this is a test of margin 
        this is a test of margin 
        this is a test of margin 
        this is a test of margin         
 </div>

效果如下所示：

2.div設置具體高度

  （1）內容只有一行

   設置div的line-height和div的高度一樣即可，這個大家都知道噠

  （2）內容不確定有幾行

   這時候需要在div中再加一層結構，用p標簽或者div都可以

   方法一：

   css代碼如下：

.demo{
    position: absolute;
    width: 200px;           
    height: 200px; 
    border: 1px solid red;
}
 p{ 
    position: absolute;
    width: 150px;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    border: 1px solid black;
 }

 HTML代碼如下：

<div class="demo">
     <p>
        this is a test of margin 
        this is a test of margin 
        this is a test of margin 
        this is a test of margin  
     </p>           
</div>

  效果如下：

   

方法二：若是不想用position：absolute這樣的脫離文檔流的樣式，那就可以嘗試模擬表格的方法

   設置父元素display：table，設置子元素display：table-cell，並設置vertical-align：middle即可

   css代碼如下：

.demo{
    width: 200px;           
    height: 200px; 
    display: table;
    border: 1px solid red;
}
 p{ 
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border: 1px solid black;
 }

HTML代碼如下：

<div class="demo">
     <p>
        this is a test of margin 
        this is a test of margin 
        this is a test of margin 
        this is a test of margin  
    </p>           
 </div>

    效果如下所示：

    

  此時子元素設置寬度是沒用的，寬度始終和父元素一致；

  但是如果子元素設置高度的話，若是高度小於父元素則無效果，若是高度大於父元素則父元素的高度也相應增加到和子元素一樣的高度

 

方法三：

  使用css3新增的flex布局完成。

  設置父元素display:box;  box-pack:center;  box-orient:vertical;即可，記得要在前面加上瀏覽器前綴哦

  css代碼如下：

.box{
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: box;
    box-pack:center;
    box-orient:vertical;
    display: -webkit-box;
    -webkit-box-pack:center;
    -webkit-box-orient:vertical;
}

HTML代碼如下：

<div class="box">
        <div>
            this is a test
            this is a test
            this is a test
        </div>
        <div>
            this is another test for the second div    
        </div>
</div>

效果顯示如下：

 

（by新手小白的記錄）