關于居中、子元素撐開父元素

1、實作父div寬高由内部元素撐開:

父div添加屬性:overflow:hidden;

子元素定位時，無法撐開父元素，因為此時子元素已脫離文本流
           

2、解決子元素定位,父元素高度撐不開的問題

将父元素也設定成position:absolute;，假如子元素為position:absolute;
           

3、水準居中方法(單個居中同理):

方式一:定位+transform
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);    移動元素自身高寬的一半，因為定位時元素有自身高寬

方式二:通過定位設定left:50%,再margin-left:-寬度的一半
	width:248px;
	position: absolute;
	left:50%;
	margin-left:-124px;
	
方式三:
	text-align:center;适用于子元素行内元素,或者轉換為display:inline-block的元素

方式四:使用僞類,當使用line-height有誤差時(即設定了font-size)
	.jf-badge-news::after {
	  content: " ";
	  display: inline-block;
	  width: 0;
	  height: 100%;
	  vertical-align: middle;
	  /* margin-top: 1px; */
	}
	
           

4、垂直居中

方式一:垂直居中vertica-align:middle，适用于子元素為行内元素，在父元素加上font-size:0px和line-height:..;實作精準居中，否則會有偏差
	非圖檔在父元素上設定vertical-align:center;
	圖檔在自身上設定vertical-align:center;

方式二：利用行内元素基準線
	将要居中的圖檔後添加文字，父元素設定行高和父元素高相同，再設定font-size：0px，即可實作圖檔的垂直居中

方式三:
	使用margin計算盒子的上下邊距，使其垂直居中
方式四:
	将盒子轉換成display：table-cell，再vertical-align：middle；使盒子垂直居中
           

5、垂直水準居中

方式一:彈性盒子

方式二:定位+margin/transform移動自身高寬50%

方式三:vertical-aligh+table-cell+margin
    .f{ 父div
      width: 400px;
      height: 400px;
      background-color: red;
      display: table-cell;
      vertical-align: middle;
      text-align: middle;
    }
    .c{子div
      width: 100px;
      height: 100px;
      background-color: orange;
      margin:auto;
    }
 
方式四:定位+margin
	.f{
     width: 400px;
     height: 400px;
     background-color: red;
     position: relative;
   }
   .c{
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     width: 100px;
     height: 100px;
     background-color: orange;
     margin:auto;
   }