html+css實現(xiàn)div居中的8種方法
我要評論水平居中
1.行級元素：為該行級元素的父元素設(shè)置text-align:center配合line-height樣式
<div style="width: 500px;height: 100px;line-height: 100px;border: 1px solid green;text-align:center;">
<span>行級元素</span>
</div>
2.塊級元素：為其自身設(shè)置margin:auto樣式
<div style="width: 500px;height: 100px;border: 1px solid red;">
<div style="line-height: 100px;text-align: center;margin:auto;width: 100px;height: 100px;border: 1px solid gold">
塊級元素
</div>
</div>
垂直居中
方法一：
display:table;此元素會作為塊級表格來顯示（類似 <table>），表格前后帶有換行符.
display:table-cell;此元素會作為一個表格單元格顯示（類似 <td> 和 <th>）
<div style="display: table;width: 500px;height: 200px;border: 1px solid red;">
<div style="display: table-cell;vertical-align: middle;text-align:center;">塊級元素</div>
</div>
方法二：
利用flex布局使內(nèi)部塊級元素水平，垂直居中（display:flex;justify-content: center; align-items:center;）
<div style="display:flex;justify-content: center; align-items:center; width: 500px;height: 200px;border: 1px solid green;text-align:center;line-height:100px ">
<div style="width: 100px;height: 100px;border: 1px solid gold">塊級元素</div>
</div>
方法三：
利用定位實現(xiàn)，父元素：position:relative; ，子元素：position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);
<div style="position:relative; width: 500px;height: 200px;border: 1px solid red;">
<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">
塊級元素
</div>
</div>
方法四：
絕對定位， left：50%，top: 50% + margin-left:-(自身寬度的一半),margin-top:-(自身高度的一半)
缺點：要自己計算容器的寬高，萬一容器的寬高改變還要修改css樣式
<div style="position:relative; width: 500px;height: 200px;border: 1px solid red;">
<div style="position:absolute;top:50%;left:50%;margin-left: -50px;margin-top: -50px;
width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">
塊級元素
</div>
</div>
方法五：
絕對定位，left: 0，right: 0, top: 0, bottom: 0 + margin：auto
<div style="position:relative; width: 500px;height: 200px;border: 1px solid red;">
<div style="position:absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;
width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">
塊級元素
</div>
</div>
方法六：
固定定位position:fixed;并設(shè)置一個較大的z-index層疊屬性值
<div style="position:fixed;top: 50%;left: 50%;margin-left: -50px;margin-top: -50px;z-index: 999;
width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">
塊級元素
</div>
方法七：
要把元素相對于視口進(jìn)行居中，那么相當(dāng)于父元素的高度就是視口的高度，視口的高度可以用vh來獲?。?/p>
<div style="margin: 50vh auto 0;transform: translateY(-50%);line-height:100px
width: 100px;height: 100px;border: 1px solid gold;text-align:center;">
塊級元素
</div>
方法八：
Flex加margin:auto
<div style="display: flex;width: 500px;height: 200px;border: 1px solid red;">
<div style="margin: auto;width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">
塊級元素
</div>
</div>
到此這篇關(guān)于html+css實現(xiàn)div居中的8種方法的文章就介紹到這了,更多相關(guān)html+css實現(xiàn)div居中內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
本文通過實例代碼給大家分享了css實現(xiàn)div居中的方法，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下2018-01-30CSS設(shè)置DIV垂直居中的N種方法 兼容IE瀏覽器
這篇文章主要為大家詳細(xì)介紹了兼容IE瀏覽器CSS設(shè)置DIV垂直居中的N種方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-05- 這篇文章主要介紹了CSS文本和div垂直居中方法總結(jié)，包括多行文本垂直居中,單行文本垂直居中,子div垂直居中，感興趣的小伙伴們可以參考一下2016-07-04
- 這篇文章主要為大家詳細(xì)介紹了CSS教程之div垂直居中的多種方法，還包括多行文本垂直居中的方法，感興趣的小伙伴們可以參考一下2016-05-05
- 這篇文章主要介紹了使用css實現(xiàn)div垂直居中的示例,需要的朋友可以參考下2014-04-17
