css 元素左右居中總結

時間 2019-12-05

標籤 css 元素左右居中總結欄目 CSS 简体版

原文原文鏈接

在平常開發中，常常會碰見居中顯示的場景，今天咱們來總結幾種。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; 都會使元素變成塊元素html

1. css：子元素div 上下左右居中方法總結
2. 元素div 上下左右居中方法總結
3. CSS中使元素居中的總結
4. css中元素居中總結
5. CSS | 元素居中
6. css-元素居中
7. css 元素居中
8. CSS經常使用的元素居中方法 CSS居中佈局總結
9. 元素居中顯示方法總結
10. 【CSS】元素居中指南
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 算法總結-雙指針
• 算法總結-回溯法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。