當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

css居中的几种方式

發布時間：2024/6/21 综合教程 26 生活家

生活随笔收集整理的這篇文章主要介紹了 css居中的几种方式小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

居中分水平和垂直兩種，使用的頻度也算是很高，下面分情況來討論一下幾種常用的實現方式。

歡迎指正文中的錯誤，同時如果有學習到新的方式也會更新在后面，也方便以后溫故知新。

1.margin

這種方式只能實現固定寬度的塊級元素水平居中，如果該元素沒有設置寬度或者不是塊級元素，則不會生效。

/*以div元素為例*/
div{
    width: 100px;
    height: 100px;
    margin: auto; /*或者margin: 0 auto;*/
}

2.line-height

將單行文字line-height值設置為其父元素高度可以實現該行文字的垂直居中，局限也很明顯。

<div id='container'>
    <p id='content'>文字內容</p>
</div>

#container{
    height: 30px;
}
#content{
    line-height: 30px;
}

3.表格

如果你使用表格的話，那么可以利用td元素的align:center和valign:middle屬性輕易的做到水平和垂直居中，但是考慮到現在表格布局的使用頻率已經很低了，實用性其實并不強。

<table>
    <tr>
        <td width='200px' height='200px' align='center' valign='middle'>
            <!-- 子元素 -->
        </td>
    </tr>
</table>

4.display: table-cell

由于單元格可以輕易的實現水平和垂直居中，所以可以把父元素容器模擬成單元格元素，通過樣式text-align:center以及vertical-align:middle來達到一樣的效果。但是要注意的是text-align:center只能使非塊級子元素水平居中而對塊級子元素無效。

<div id="table-cel">
    <div></div>
</div>

#table{
    display: table-cell;
    width: 200px;
    height: 200px;
    vertical-align: middle;
    text-align: center;
}

5.絕對定位居中

這個方法使用的相對也較多，但是需要子元素有固定的寬高，不多說直接上代碼。

<body>
    <div></div>
</body>

html,
body{
    width: 100%;
    height: 100%;
}
body{
    position: relative;
}
body>div{
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    /*此時的元素并不是居中的，向右偏了一半的寬度，向下偏了一半的高度*/
    /*所以要使用margin把元素拉回來*/
    margin: -50px 0 0 -50px; 
}

6.translate(-50%, -50%)

這個方法比較厲害了，其實可以算是前面絕對定位方法的改良版。之前的方法只能使固定寬高的元素居中，但是使用transform: translate(-50%, -50%);可以使不固定高寬的元素達到居中的效果。因為translate屬性的百分比值是根據它本身而非父元素，下面看代碼：

<div id="father">
    <div id="child"></div>
</div>

#father{
    width: 200px;
    height: 200px;
    position: relative;
}
#child{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}

總結

以上是生活随笔為你收集整理的css居中的几种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。