CSS中设置元素居中的方法
1.使用margin设置居中
优点：几乎兼容所有浏览器
缺点：
1.上下的外边距只针对块元素有效
2.会产生外边距合并问题，较麻烦
3.容易产生误差，且要有固定的高度和宽度
<style>
div {
width: 400px;
height: 300px;
border: 1px solid red;
}
span {
display: block;
width: 50px;
height: 50px;
background-color: blue;
margin-top: 125px;
margin-left: 175px;
}
</style>
</head>
<body>
<div>
<div><span></span></div>
</div>
2.使用定位实现居中
优点：
1.几乎兼容所有浏览器。
2.只用这一个类可实现任何元素居中
缺点：
1.代码量比较大，计算比较麻烦
<style>
div {
width: 400px;
height: 300px;
border: 1px solid red;
position: relative;
}
span {
display: block;
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
top: 50%; //先让盒子的上边线移动到父盒子垂直居中位置
margin-top: -25px; //再使盒子向上移动自身高度的一半
left: 50%; //先让盒子的左边线移动到父盒子垂直居中位置
margin-left: -25px; //再使盒子向左移动自身宽度度的一半
}
3.使用定位和transform实现居中
优点：
1.几乎兼容所有浏览器。
2.只用这一个类可实现任何元素居中
3.计算简单
缺点：
1.代码量比较大
div {
width: 400px;
height: 300px;
border: 1px solid red;
position: relative;
}
span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); //在X轴和Y轴方向向左和向上移动盒子自身高度的一半
width: 50px;
height: 50px;
background-color: blue;
}
效果图
4.使用test-align:center;水平居中，height===line-hight垂直居中
优点：
1.几乎兼容所有浏览器。
2.代码量小，计算简单
缺点：
1.只针对行级元素有效
div {
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
line-height: 300px;
}
span {
width: 50px;
height: 50px;
background-color: blue;
}
5.使用display:table-cell实现居中
优点：
1.几乎兼容所有浏览器。
2.代码量小，计算简单
3.支持所有元素
缺点：
1.盒子的margin属性会失效
2.再设置宽高为百分比不起作用
3.需要设置position:为absolute,table-cell属性就会失效
div {
width: 400px;
height: 300px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
span {
width: 80px; //display: block;
height: 80px; // margin: auto; 加上这两句可以使块级元素居中
background-color: blue;
}
</style>
效果图
6.使用flex盒子模型实现居中
优点：
1.代码量小，计算简单
2.元素宽高改变时，可以自适应
3.支持所有元素
缺点：
1.浏览器兼容性比较差，只能兼容到IE9及以上
div {
width: 400px;
height: 300px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
span {
width: 50px;
height: 50px;
background-color: blue;
}
