说起居中就来气，说居中可以看出工作经验，我总结几个，大家可以参考下
1、行内元素的居中
这点不用多说，水平居中用text-align:center,垂直居中用line-hight：高值
2、已知宽高的块级元素居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#one{
400px;
height: 400px;
border: 1px solid red;
position: relative;/*父盒子要相对定位*/
}
#two{
100px;
height: 100px;
border: 1px solid blue;
position: absolute;/*子盒子要绝对定位*/
left: 50%;
top: 50%;
margin-top: -50px;/*向上偏移自身高度的一半*/
margin-left: -50px; /*向左自身宽度的一半*/
}
</style>
</head>
<body>
<div id="one">
<div id="two"></div>
</div>
</body>
</html>
3、未知宽高的块级元素居中之table-cell
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中table</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#one{
400px;
height: 400px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
#two{
100px;
height: 100px;
border: 1px solid blue;
display: inline-block;/*须转化为内联元素*/
}
</style>
</head>
<body>
<div id="one">
<div id="two"></div>
</div>
</body>
</html>
4、未知宽高的块级元素居中之transform
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3transform</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#one{
400px;
height: 400px;
border: 1px solid red;
position: relative;
}
#two{
100px;
height: 100px;
border: 1px solid blue;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
position: absolute;
}
</style>
</head>
<body>
<div id="one">
<div id="two"></div>
</div>
</body>
</html>
5、未知宽高的块级元素居中之弹性盒子布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹性盒子布局flex</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#one{
400px;
height: 400px;
border: 1px solid red;
display: flex;
justify-content: center;/*水平居中*/
align-items: center;/*垂直居中*/
}
#two{
100px;
height: 100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="one">
<div id="two"></div>
</div>
</body>
</html>