前端開發經常使用css居中佈局

時間 2019-11-10

標籤前端開發經常使用 css 居中佈局欄目 CSS 简体版

原文原文鏈接

在前端開發中，常常會碰到佈局須要左右居中，上下居中的狀況，在現代瀏覽器中實現居中仍是挺方便的，本文只考慮在高版本現代瀏覽器中的狀況，不考慮IE.css

1.文本居中屬性 text-align

這是經常使用的水平居中圖片，按鈕，文字等行內元素的方法，但不能上下居中html

<style lang="css">
    .parent {
        width: 100%;
        height: 800px;
        background: green;
    }
    
    .sub {
        width: 200px;
        height: 200px;
        background: red;
        text-align: center;
    }
</style>

<body>
    <div class="parent">
        <div class="sub">
            abcedd
        </div>
    </div>
</body>

實現效果：
前端

2.自動居中 margin:auto

此方法也只能實現水平居中，具體用法爲：margin:0 auto

.sub {
        width: 200px;
        height: 200px;
        background: red;
        margin: 0 auto;
    }

實現效果：
css3

3. 用line-height實現文字上下居中

.sub {
        width: 200px;
        height: 200px;
        background: #ccc;
        margin: 0 auto;
        line-height: 200px;
        text-align: center;
    }

4.表格居中

若是使用表格居中的話，用表格屬性 td(也可能會用到 th)元素的 align="center" 以及 valign="middle" 就能夠實現左右上下居中了瀏覽器

5.使用display:table-cell來居中

對於不是表格的元素，可使用display:table-cell模擬表格，實現居中的目的。這種狀況下，父級容器要指定寬度，用百分比的話達不到左右居中的目的佈局

<style lang="css">
    .parent {
        width: 800px;
        height: 800px;
        display: table-cell;
        vertical-align: middle;
    }
    
    .sub {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        background: #ccc;
    }
</style>

<body>
    <div class="parent">
        <div class="sub">
        </div>
    </div>
</body>

6.使用定位position

<style lang="css">
    .parent {
        width: 800px;
        height: 800px;
        position: relative;
    }
    
    .sub {
        width: 200px;
        height: 200px;
        background: #ccc;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }
</style>

<div class="parent">
        <div class="sub">
        </div>
    </div>

要注意的是。margin:auto必不可少，這是其一，還有一種spa

<style lang="css">
    .parent {
        width: 100%;
        height: 800px;
        position: relative;
    }
    
    .sub {
        width: 200px;
        height: 200px;
        background: #ccc;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
    }
</style>

<body>
    <div class="parent">
        <div class="sub">
        </div>
    </div>
</body>

這些都是經常使用的居中方式，在css3中，還可使用彈性佈局來居中元素，下篇文章在詳細說明。code

轉自：http://dawns.me/2017/07/04/ht...htm