今天介紹幾種讓一個盒子在另一個盒子中居中的方法;

內聯元素：給子盒子設定display屬性為inline，然後在設定line-height為父盒子的高度

html：

    <div class="box">
        <p>p標籤</p>
    </div>

.box {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            border: 1px solid #f00;
            text-align: center;
        }
        p {
            display: inline;
            line-height: 200px;
            background-color: #f40;
        }
 

結果：

對於內聯元素垂直居中的方法還有很多，此處只介紹一種，重點介紹兩種塊狀元素垂直居中的方法。

塊狀元素：

1、父盒子設定display屬性為flex，flex-direction:column, justify-content: center；

html：

	<div class="box">
        	<div class="small"></div>
    	</div>

 .box {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            border: 1px solid #f00;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .small {
            width: 100px;
            height: 100px;
            background-color: #f40;
        }
 

2、設定父盒子display屬性值為 -webkit-box,;-webkit-box-orient:horizontal;-webkit-box-align:center;

html:

<div class="box">
        <div class="small"></div>
    </div>

 .box {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            border: 1px solid #f00;
            display:-webkit-box;
            -webkit-box-orient:horizontal;
            -webkit-box-align:center;
        }
        .small {
            width: 100px;
            height: 100px;
            background-color: #f40;
        }
 

讓元素垂直居中的方法還有很多，這裡就不一一介紹了。本人水平有限，寫的不好的地方歡迎指出，共同討論。