如何居中一个未知宽高的元素 居中浮动元素

1、垂直居中一个不定宽高的浮动元素

html

<div class="div1">
    <div class="div2">我是一个浮动元素</div>
</div>

css

.div1{
    width:300px;
    height:200px;
    background: #f5f5f5;
    border: 1px solid red;
    display: table-cell;
    vertical-align: middle;
}
.div2{
    float:right;
    
}

效果

2、水平居中未知宽的浮动元素

方法一：

html

<div class="div1">
   <div class="warp">
      <div class="div2">我是一个浮动元素</div>
   </div>
</div>

css

.div1{
    width: 300px;
    height: 200px;
    background: #f5f5f5;
    border: 1px solid red;
}
.warp{
    position: relative;
    float: right;
    right: 50%;    
}
.div2{
    height: 100px;
    border: 1px solid green;
    float: right;
    position: relative;
    left: 50%;
}

效果

方法二：

html

<div class="div1">
   <div class="div2">我是元素，浮不浮动没关系</div>
</div>

css

.div1{
    width: 300px;
    height: 200px;
    background: #f5f5f5;
    margin: auto;
    border: 1px solid red;
    display: flex;
    justify-content: center;
}
.div2{
    height: 100px;
    border: 1px solid green;
    float: left;  // 浮不浮动都一样
}

效果

3、垂直居中一个一个未知宽高的元素

html

<div class="div-1">
    <div class="div-2">我是元素居中我</div>
</div>

css

.div-1{
    width: 300px;
    height: 200px;
    background: #f5f5f5;
    border: 1px solid red;
    display: flex;
    align-items: center;
}
.div-2{
    border: 1px solid green;
    /*height: 100px;*/  //高度已知和未知无所谓
}

效果

4、水平垂直居中一个未知宽高的元素

方法一：

html

	<div class="div-1">
		<div class="div-2">我是元素居中我</div>
	</div>

css

		.div-1{
			width: 300px;
			height: 200px;
			background: #f5f5f5;
			border: 1px solid red;
			position: relative;  //主要代码
                }
		.div-2{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);//以上主要代码
			border: 1px solid green;
		}

效果

方法二：

html

	<div class="div-1">
		<div class="div-2">我是元素居中我</div>
	</div>

css

                .div-1{
			width: 300px;
			height: 200px;
			background: #f5f5f5;
			border: 1px solid red;
			display: flex;   // 主要代码
			justify-content: center;
			align-items: center;
		}
		.div-2{
			border: 1px solid green;
		}

效果

方法三：

html

	<div class="div-1">
		<div class="div-2">我是元素居中我</div>
	</div>

css

		.div-1{
			width: 300px;
			height: 200px;
			background: #f5f5f5;
			border: 1px solid red;
			display: table;   //主要代码
			
		}
		.div-2{
			border: 1px solid green;
			display: table-cell;  // 主要代码
			text-align: center;
			vertical-align: middle;
		}

效果（边框线相贴在一起了）

居中还有很多其他方法，没有一一列举出来，只是最近遇到了这个问题，总结了几种方法