在日常開發中，經常會遇見居中顯示的場景，今天我們來總結幾種。
- 首先常見的是文字居中，當元素內部有文字是，想讓文字居中顯示，一般當前元素為塊元素使用text-align即可解決
<div>
<p>居中顯示文字</p>
</div>
<style>
div p{
text-align: center
}
</style>
複製程式碼- 如果是行內元素，在父級使用text-align可以達到同樣的效果
<body>
<div>
<span>居中顯示文字</span>
</div>
</body>
<style>
div{
text-align: center
}
</style>
複製程式碼- 塊元素居中，內部沒有文字,寬高一定，使用margin的特性，左右auto可以達到效果
<body>
<div></div>
</body>
<style>
div{
width: 100px;
margin: 0 auto;
background-color: #f00;
height: 20px;
}
</style>
複製程式碼
- 使用position，寬度已知,根據定位left的50%，可以把元素定在中間，由於css的判定是從元素的左邊算起，所以使用margin-left -width/2可以修正元素顯示偏移
div{
width: 100px;
background-color: #f00;
position: absolute;
top: 0;
left: 50%;
margin-left: -50px;
}
複製程式碼- 使用position，如果寬度不能確定
div{
width: 100px;
height: 50px;
background-color: #f00;
position: absolute;
top: 0;
right: 0;
left: 0;
margin: auto;
}
複製程式碼
- 使用flex justify-content
<body>
<div>
<span>顯示元素</span>
</div>
</body>
<style>
div{
display: flex;
justify-content: center;
}
</style>
複製程式碼
- flex 使用align-item,align-item本來是上下居中的，這裡我們使用flex-direction改變元素排列為上下
div{
display: flex;
flex-direction: column;
align-items: center;
}
複製程式碼- 使用display:table
<body>
<div>
<p>顯示元素</p>
</div>
</body>
<style>
div{
display: table;
width: 100%;
text-align: center;
}
</style>
複製程式碼
小tips:
position:absolute;
display:flex;
display:block;
display:table;
都會使元素變成塊元素