1. 浮动元素宽度确定
(1)使用margin: 0 auto
加一层父级div：在需要居中的浮动元素（A）外加一层父级div（B），并且A和B宽度width相等，给父级div加margin: 0 auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content{
width: 100px;
border: 3px solid red;
margin: 0 auto;
}
.box{
width: 100px;
height: 100px;
border: 3px solid blue;
float: left;
}
</style>
</head>
<body>
<div class="content">
<div class="box">123</div>
</div>
</body>
</html>
(2)使用 margin-left:50%
在需要居中的浮动元素（A）外加一层父级元素div（B），需要子元素确定宽度，设置 margin-left: 50%; left:-25px;（宽度的一半）（将子元素向左移动其宽度的一半，这个时候可保证子元素的中间点位于父元素的中央）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content{
width: 300px;
border: 3px solid red;
}
.box{
width: 50px;
margin-left: 50%;
border: 3px solid blue;
float: left;
position: relative;（为啥要用position？？）
left: -25px;
}
</style>
</head>
<body>
<div class="content">
<div class="box">123</div>
</div>
</body>
</html>
（3）使用position定位
浮动元素绝对定位，父级元素相对定位，left,top都设置50%，此时子元素的左顶点在页面中间，设置 margin: -50px 0px 0px -50px; （顶部和左边移元素的一半）;子元素页面居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content{
margin: 300px;
height: 300px;
position: relative;
background-color: silver;
}
.box{
width: 100px;
height: 100px;
border: 3px solid blue;
float: left;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0px 0px -50px;
}
</style>
</head>
<body>
<div class="content">
<div class="box">123</div>
</div>
</body>
</html>
2.浮动元素宽度不确定，使用position定位
浮动元素绝对定位，父级元素相对定位，left,top都设置50%，此时子元素的左顶点在页面中间，设置transform:translate(-50%,-50%);子元素页面居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content{
margin: 300px;
height: 300px;
position: relative;
background-color: silver;
}
.box{
width: 100px;
height: 100px;
border: 3px solid blue;
float: left;
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="content">
<div class="box">123</div>
</div>
</body>
</html>
