一般來說居中的話可分為水平居中與垂直居中，以下是我個人總結的幾種方式
1.水平居中：
- inline元素：text-algin:center實現
- block元素：margin：auto
- absolute元素：left:50%+margin-left:負該盒子寬度的一半（必須得知道該元素的寬度）
2.垂直居中
- inline元素：line-height=height實現
- absolute元素：left:50%+margin-top:負該盒子高度的一半（必須得知道該元素的高度）
- absolute元素：transform(-50%,-50%）
- absolute元素：left，right，top。bottom都等於0加上margin：auto
具體實現代碼如下：
<body>
<div class="container container-1">
<span>一段文字</span>
</div>
<div class="container container-2">
<div class="item">
this is item
</div>
</div>
<div class="container container-3">
<div class="item">
this is item
</div>
</div>
<div class="container container-4">
<div class="item">
this is item
</div>
</div>
</body>
<style type="text/css">
.container {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
height: 200px;
}
.item {
background-color: #ccc;
}
.container-1 {
text-align: center;
line-height: 200px;
height: 200px;
}
.container-2 {
position: relative;
}
.container-2 .item {
width: 300px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -50px;
}
.container-3 {
position: relative;
}
.container-3 .item {
width: 200px;
height: 80px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
.container-4 {
position: relative;
}
.container-4 .item {
width: 100px;
height: 50px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>