前段時間面試的時候面試題裡面對css考察最多的就是div居中對齊的問題，因此特地對div居中對齊的方式做了乙個簡單的總結，本文的目標就是希望各位在以後根據不同的情況使用不同的居中方式，閒話少說，直接上**
display: flex;
width: 500px;
height: 500px;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-ms-flex-align: center;
justify-content: center;
align-items: center;
background-color: #000;
} width: 300px;
height: 300px;
background-color: #666;}
父元素display設定為flex,使用flexbox布局，在此布局下的元素就具備了伸縮的特性，再通過justify-content設定元素主軸上的對齊方式center,即可實現水平方向上的對齊，再利用align-items設定側軸上的對齊方式center,即可實現垂直方向上的對齊
position: relative;
width: 500px;
height: 500px;
background-color: #000;
} position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 300px;
height: 300px;
background-color: #666;}
當乙個絕對定位元素，其對立方向屬性同時具有數值時，其流體特性就觸發了，margin當兩側的值都是auto時會平分剩餘空間的大小，因此當四個方向都是auto時就可以實現水平和垂直方向的居中
position: relative;
width: 500px;
height: 500px;
background-color: #000;
} position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width: 300px;
height: 300px;
background-color: #666;
}position: relative;
width: 500px;
height: 500px;
background-color: #000;
} position: absolute;
margin-top: 50%;
margin-left: 50%;
top: -150px;
left: -150px;
width: 300px;
height: 300px;
background-color: #666;}
以上內容是個人的一點總結，如果有錯誤或不嚴謹的地方，歡迎批評指正，如果喜歡，歡迎點讚收藏
div內容垂直居中對齊
css垂直居中屬性設定vertical align middle對div不起作用，例如 在div中垂直居中 執行後按鈕沒有在div中垂直居中 解決思路 如果div和按鈕的寬高都確定為具體畫素值，可以直接設定按鈕的css屬性 position relative top為 div.height butt...
DIV實現垂直居中對齊的方法
儘管有css的vertical align特性，但是並不能有效解決未知高度的垂直居中問題 在乙個div標籤裡有未知高度的文字或的情況下 標準瀏覽器如mozilla,opera,safari等.可將父級元素顯示方式設定為table display table 內部子元素定為table cell dis...
關於居中對齊的方式總結
對於行內元素可以使用text align center 對於塊級元素使用margin auto 使用絕對定位，left 50 margin left 子元素寬度的一半 使用絕對定位 transform屬性 left 50 transform translatex 50 使用絕對定位 margin a...