居中（在包含塊中居中）1）行盒、行塊盒水平居中
直接設定行盒父元素：text-align:center;
2）常規流 塊盒 水平居中
定寬，左右設定margin為automargin:0 auto;
3）絕對定位或者固定定位元素水平居中
1、left:0; right:0; margin:0 auto;定寬
2、left:50%; transform:translatex(-50%);不定寬定寬都可以
4）flexbox盒子居中
給父盒子設定display:flex;justify-content:center;
1）單行文字垂直居中
設定行高等於整個區域高度
2）行塊盒或者塊盒多行文字的垂直居中
沒有完美方案；
設定上下padding撐開，但是不能知道高度
或者父元素設定display:table-cell;vertical-align: middle;
3）絕對定位的垂直居中
1、top:0; bottom:0; margin:auto 0;定高
2、top:50%; transform:translatey(-50%);不定高定高都可以
4）flexbox盒子居中
給父盒子設定display:flexalign-items:center;
多行文字居中垂直display:flex; align-content:center;
1）設定父元素為相對定位，給子元素設定絕對定位，
top: 0; right: 0; bottom: 0; left: 0; margin: auto;
2）設定父元素為相對定位，給子元素設定絕對定位，需要知道寬高
left: 50%; top: 50%; margin-left: --元素寬度的一半px; margin-top: --元素高度的一半px;
3）使用定位屬性
設定父元素為相對定位，給子元素設定絕對定位，
left: 50%; top: 50%; transform: translatex(-50%) translatey(-50%);
4）使用flex布局實現設定父元素為flex定位，
justify-content: center; align-items: center;
css 居中總結
1.定寬塊狀元素 水平居中 divstyle 2.不定寬塊狀元素 水平居中 wrap class wrap 設定我所在的div容器水平居中 div 2.display inline textalign center 它將塊狀元素的 display 型別改為 inline，變成了行內元素，所以少了一些...
css居中總結
給父元素設定 text align center 但對浮動元素，絕對定位元素無效設定margin 0 auto 將塊級元素display設定為inline，然後使用text align center 給父元素設定float,position relative,left 50 子元素設定positio...
css居中總結
1.我們可以通過給該元素的父級設定margin 0 auto的方式來實現。html class parent class child center div div css child此時檢查元素即可即可實現內層的div實現了居中,這種方式是最為我們熟知的，其缺點是需要設定子元素的寬度。2.通過pos...