/*方法一:position margin: auto*/
.container {
position: relative;
}
.content {
position: absolute;
top: 0; left: 0;
right: 0; bottom: 0;
margin: auto;
}
/*注:当内容没有宽度高度时会充满整个空间可以用max-height来限制*/
/*方法二:position top: 50% left: 50%; margin-top:-50%*height margin-left:-50%*width*/
.container {
position: relative;
height: 800px;
}
.content {
width: 200px;
height: 200px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
/*方法三:position translate*/
.container {
position: relative;
height: 800px;
}
.content {
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*方法四:display:flex*/
.container {
height: 800px; /*父元素不能设置百分数,需要有一定的高度*/
display: flex; /*需要处理兼容性问题*/
justify-content: center;
align-items: center;
}
.content {
width: 200px;
height: 200px;
background: red;
}
/*方法五: 父:dislay:table-cell */
.container {
width: 1366px;
height: 800px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.content {
width: 200px;
height: 200px;
background: red;
display: inline-block;
}
标签:居中,盒子,top,50%,height,content,position,css,200px
来源: https://www.cnblogs.com/xiyuyizhihua/p/11125754.html