如何讓元素在父元素中水平或垂直居中：
行內元素：
text-align:center;
line-height:height;
塊級元素：
1.給父元素設定display:flex伸縮盒布局;
並且設定:
align-items:center;
justify-content:center;
2.給父元素乙個定位屬性，子元素使用絕對定位，並且使用配合屬性left:50%;top:50%;讓子元素左上角移動到父元素中心位置；然後再讓子元素使用margin-left:-width/2;margin-top:-height/2;
3.給父元素乙個定位屬性，給子元素乙個絕對定位。然後給子元素的所有配合屬性設定為0px(top/left/top/bottom)並且給子元素設定margin:auto
4.給父元素設定乙個display:flex;子元素設定margin:auto
方法2**案例：
水平居中和垂直居中
行內元素 為該行內元素的父元素新增設定text align center 塊級元素 為其自身設定margin auto樣式 子元素是行內元素 設定父元素的line height為其自身盒子的高度 子元素是塊級元素但子元素高度沒有設定 設定父元素是 display table cell vertica...
垂直居中和水平居中總結
container center 以上 可使塊級子元素水平垂直居中，為inline block的子元素只能垂直居中，若也想其水平垂直居中確保在父元素樣式中新增 text align center。關鍵必須設定其父元素固定寬高。即使有多個子元素也一樣可以垂直水平居中。當子元素都為行內元素 行內元素不能...
CSS 垂直居中和水平居中
position relative width 500px height 500px background color ddd content background color 6699ff width 50 height 50 position absolute top 25 left 25 這兩...