html设置盒子水平垂直居中,css 盒子水平垂直居中

我是内容盒子

/*方法一：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