关于居中、子元素撑开父元素

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; */
	}

方式五:margin:auto;	适用于块级元素

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；使盒子垂直居中
	vertical-align声明只会影响行内元素或者table-cell元素

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;
    }
 
方式四:定位(absolute、fixed)+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;
   }

方式五:flex+margin
大意是在flex格式化上下文中,设置了margin: auto的元素,在通过justify-content和align-self进行对齐之前,任何正处于空闲的空间都会分配到该方向的自动margin中去
.g-parent {
    width: 100vw;
    height: 100vh;
    
    display: flex;
	以下都行:
	display: flex;
    display: inline-flex;
    display: grid;
    display: inline-grid;
}

.g-child {
    width: 40vmin;
    height: 40vmin;
    background: #000;
    margin: auto;
}

方法六:绝对定位+负margin
.c{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-left:-50px;
  nargin-top:-50px;
}

方式七:display: grid+place-items: center
.g-container {
   display: grid;
   place-items: center
}