如何水平居中一个div？如何居中一个浮动元素？如何让绝对定位的div居中

如何水平居中一个div？

1.不需要知道宽高

css:
#wrap{
width: 200px;
height: 200px;
background: orange;
position: absolute/fixed;
      top:0;bottom:0;left: 0;right: 0;margin:auto;
}
html:
	<div id="wrap"</div>

2.知道宽高

css:
	#wrap{
	width: 200px;
	height: 200px;
	background: orange;
	position: absolute;
	top:50%;left: 50%;margin-top:-100px;margin-left: -100px;
}
html:
	<div id="wrap"</div>

3.弹性盒

css:
	*{margin:0;padding: 0;}
	html,body{
		height: 100%;
	}
	body{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#wrap{
	width: 200px;
	height: 200px;
	background: orange;
	}
html:
		<div id="wrap"</div>

如何居中一个浮动元素？

css:
.outerbox {
	float: left;
	position: relative;
	left: 50%;
}

.innerbox {
	float: left;
	position: relative;
	right: 50%;
}
html:
<div class="outerbox">
	<div class="innerbox">我是浮动的</div>
</div>

如何让绝对定位的div居中

css:
.center{
         position: absolute; /*绝对定位*/
         width: 500px;
         height:300px;
         background: red;
         margin: 0 auto; /*水平居中*/
         left: 0; /*此处不能省略，且为0*/
         right: 0; /*此处不能省略，且为0*/
}
html:
<div class="center"></div>