css實現元素的居中

css樣式實現居中

左右居中：

1，text-align: center;//實現行內元素的左右居中顯示

2，margin：0 auto;//實現塊級元素的左右居中顯示

垂直居中：

1，在固定高度的狀況下，使用line-height：父元素高度;實現行內元素的垂直居中。

2，利用position: relative;、margin-top:-(盒子的高度的一半);、top:50%;實現垂直居中，相對定位可使用top，top佔據父元素高度一半，margin-top設置負數，盒子向上挪動自身高度一半實現居中。

3，利用position: relative;、transform: translateY(-50%);、top:50%;實現垂直居中，相對定位可使用top，top佔據父元素高度一半，transform: translateY(-50%);使得盒子向上挪動自身高度一半實現居中。

4，父元素設置display: table;
子元素設置display: table-cell;vertical-align: middle;//實現垂直居中
text-align: center;//子元素前面的樣式加上這句實現垂直和左右居中

同時實現垂直和左右居中

1，子絕父相，子元素樣式設置：
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;

2，彈性盒子flex實現居中 display: flex; align-items: center; /*定義父元素的元素垂直居中*/ justify-content: center; /*定義子元素的裏的元素水平居中*/