.container {
position: relative;
margin: 0 auto;
width: 600px;
height: 400px;
border: 2px solid #666;
}
.item {
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
width: 200px;
height: 200px;
background-color: #8c7676;
}
2、absolute(left,right,top,bottom) + margin + width + height
.container {
position: relative;
margin: 0 auto;
width: 600px;
height: 400px;
border: 2px solid #666;
}
.item {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 200px;
height: 200px;
background-color: #8c7676;
}
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
margin: 0 auto;/*margin在table-cell下已经不起用了*/
width: 600px;
height: 400px;
border: 2px solid #666;
}
.item {
display: inline-block;
padding: 100px; /*用padding来撑开元素,没有设置宽高*/
background-color: #8c7676;
}
.container {
position: relative;
margin: 0 auto;
width: 600px;
height: 400px;
border: 2px solid #666;
}
.item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 100px;/*用padding来撑开元素,没有设置宽高*/
background-color: #8c7676;
}
.container {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 600px;
height: 400px;
border: 2px solid #666;
}
.item {
display: inline-block;
padding: 100px;/*用padding来撑开元素,没有设置宽高*/
background-color: #8c7676;
}
4、text-align:center;vertical-align:middle;
.container {
text-align: center;
font-size: 0;
margin: 0 auto;
width: 600px;
height: 400px;
border: 2px solid #666;
}
.container::before {
display: inline-block;
content: '';
width: 0;
height: 100%;
vertical-align: middle;
}
.item {
display: inline-block;
vertical-align: middle;
padding: 100px;/*用padding撑开元素,没有设置宽高*/
font-size: 12px;/*重新设置子元素内的字体大小*/
background-color: #8c7676;
}
.container {
position: relative;
margin: 0 auto;
width: 600px;
height: 400px;
border: 2px solid #666;
}
.item {
position: absolute;
left: calc(50% - 200px / 2);
top: calc(50% - 200px / 2);
width: 200px;
height: 200px;
background-color: #8c7676;
}