一菩暗、寬高未知
1. flex
body就代表父元素，使用彈性盒模型就可以旭蠕。
body{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
2.絕對定位和位移屬性
div是要居中的元素停团，如果父元素不是body，要相對于父元素居中掏熬，要給父親元素設(shè)置position: relative;這里的translate位移屬性是相對于自己而言佑稠。
div{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
3. flex配合margin和translate
body{
display: flex;
}
div{
margin: 50vh auto 0;
transform: translateY(-50%);
}
二、寬高已知
1. 絕對定位和margin:auto
子元素要有寬高旗芬。
h3{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
}
2. display:table-cell
只有給父親元素和子元素都設(shè)置了寬高才可以舌胶。
body{
height: 500px;
width: 500px;
display: table-cell;
vertical-align: middle;
}
h3{
margin: 0 auto;
width: 200px;
height: 200px;
}
3. 利用margin的負值
這個方法還必須知道元素的寬高。
h3{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
4. 利用計算屬性calc
div{
width: 200px;
height: 200px;
background: red;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
三疮丛、浮動元素居中
父元素和子元素同時左浮動幔嫂，然后父元素相對左移動50%，再然后子元素相對左移動-50%/或相對右50%誊薄。
.box{
float:left;
position:relative;
left:50%;
}
p{
float:left;
position:relative;
right:50%;
}
<div class="box">
<p>我是浮動的</p>
<p>我也是居中的</p>
</div>
