总共分成两类，一类是通过设置display的属性，一类是通过position定位。
其中display可以设置为flex和table_cell
position应注意子元素绝对定位，父元素相对定位，之后设置子元素的偏移量，宽高分别为父元素的一半加上子元素的一半。这样的设置可以分为以下3种变形：
1.直接计算出偏移量的px值；
2.left, top设置成50%，再通过margin属性往回拉一半子元素的宽高；
3.left, top设置成50%，再通过transform属性往回拉一半子元素的宽高；
还有一种居中的方式就是子元素上下左右的偏移量均是0，margin：auto。注意，如果子元素没有设置宽高，那么子元素将平铺在父元素中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2center</title>
<meta name="description" content="6 ways to make the element center in vertical and horizon" />
<style>
.f{
width: 500px;
height: 500px;
background-color: red;
}
.s{
width: 200px;
height: 200px;
background-color: yellow;
}
/*1.父元素设置display:flex, align-items是上下，justify-content是左右*/
/* .father{
display: flex;
align-items: center;
justify-content: center;
}*/
/*display: table-cell后，元素会作为一个表格单元格显示（类似 <td> 和 <th>），vertical-align: middle是垂直居中，子元素margin: auto是水平居中*/
.father{
display: table-cell;
vertical-align: middle;
}
.son{
margin: auto;
}
/*2.1position定位 子绝父相。子的宽高偏移量分别是父元素的一半加自身的一半*/
/* .father{
position: relative;
}
.son{
position: absolute;
left: 150px;
top: 150px;
}*/
/*2.2 position定位 子绝父相。子的宽高偏移量是父元素的一半，然后用自身的margin属性再往回移自身宽高的一半。left往右是正值，往左是反值。*/
/* .father{
position: relative;
}
.son{
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
}*/
/*2.3 position定位 子绝父相。子的宽高偏移量是父元素的一半，然后用transition属性再往回移自身宽高的一半。右下是正值*/
/* .father{
position: relative;
}
.son{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}*/
/*拓展一种居中用法，先定位，再设置 left：0;right：0;margin:auto 可以使元素水平居中。 设置 top:0;bottom:0;margin:auto 可以使元素垂直居中。当然，设置四个值都是0；margin：auto；后，这个元素就在正中间了。如果不设置元素大小，就平铺了。*/
/* .father{
position: relative;
}
.son{
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 0;
bottom: 0;
}*/
</style>
</head>
<body>
<div class="f father">
<div class="s son"></div>
</div>
</body>
</html>
网友评论