关于css基础内容居中的思考与总结

水平居中

1.行内元素局中（只讨论一个父元素和子元素）
方法一：
css代码
body{
text-align: center;
}
p{
display: inline;
background:#ff3;
}
2.块状元素局中
方法一（把块状元素转化为行内元素看待）：body{
text-align: center;
}
.container{
width:100px;
height:100px;
background:#ff3;
display: inline-block;

}方法二(常规方法）：
.container{
width:100px;
height:100px;
background:#ff3;
margin：auto;

}
方法三：
.container{
float:left;
position:relative;
left:50%;
}
.children:{
width:100px;
height:100px;
position:relative;
left:-50%;
(right:50%)
}
方法四（flex模型，适用于一个或多个子元素）：
body{
display: flex;
justify-content: center;
}
.container{
width:100px;
height:100px;
background:#ff3;

}水平垂直居中
方法一：#container{
position:relative;
}
#center{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}方法二：#container{
position:relative;
}
#center{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
}方法三：#container{
position:relative;
}
#center{
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}方法四：#container{
display:flex;
justify-content:center;
align-items: center;
}