盒子水平垂直居中
1.盒子有固定寬高的情況
<1>{position:absolute;? left:0;? bottom:0;? top:0;? right:0;? margin:auto;}
<2>{position:absolute;top:50%;left:50%;margin-top:-高度一半;margin-left:-寬度一半;}
2.不清楚盒子寬高的情況
<1>{position:absolute; ?left:50%; ?top:50%; ? transform:translate(-50%,-50%);}
<2>在父元素中添加
? ? ? ? ? ? justify-content: center; /*子元素水平居中*/
? ? ? ? ? ?align-items: center; /*子元素垂直居中*/
? ? ? ? ? ?display: -webkit-flex;
圖片水平垂直居中
1.如果圖片的寬度小于父元素的寬度,那么可以使用text-align: center;來居中圖片
2.如果圖片的寬度大于父元素的寬度,但是圖片的寬度是已知的,那么可以使用定位流left:50%; margin-left: -圖片寬度的一半;
3.如果圖片的寬度大于父元素的寬度,但是不知道圖片的寬度,那么可以使用給父元素添加text-align: center;給圖片添加margin: 0 -100%;
文字水平垂直居中
1.單行垂直居中
? ? ? ?如果一個容器中只有一行文字殉疼，對它實現(xiàn)居中相對比較簡單，我們只需要設(shè)置它的實際高度height和所在行的高度line-height相等即可。
2.多行未知高度文字的垂直居中
? ? ?如果一段內(nèi)容锥腻，它的高度是可變的那么我們可以設(shè)定Padding逸寓，使上下的padding值相同即可
3.多行文本固定高度的居中
? ? ? CSS中的vertical-align屬性只會對擁有valign特性的(X)HTML標(biāo)簽起作用，但是在CSS中還有一個display屬性能夠模擬慨蓝，所以我們可以使用這個屬性來讓div模擬table就可以使用vertical-align了感混。注意，display:table和display:table-cell的使用方法菌仁，前者必須設(shè)置在父元素上浩习，后者必須設(shè)置在子元素上，因此我們要為需要定位的文本再增加一個div元素
