水平居中
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;
}