css 元素左右居中總結

在日常開發中，經常會遇見居中顯示的場景，今天我們來總結幾種。

首先常見的是文字居中，當元素內部有文字是，想讓文字居中顯示，一般當前元素為塊元素使用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; 都會使元素變成塊元素

css 元素左右居中總結

相關文章