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

灰太狼 2021-07-25 01:26 510阅读 0赞

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