收羅CSS布局中有關水平和垂直居中的N種方法

2024-07-11 08:31:01

字體：大中小

來源：轉載

供稿：網友

最近開始倒回來看看CSS這塊兒有什么不太了解的地方需要鞏固！呵，好家伙！一番折騰之后我發現還真有很多不太了解的。真是學無止境啊...CK說網上有很大概15種可以讓CSS元素居中的方法。Oh,賣糕的！這是逼我查資料到夜晚兩點的節奏么？

閑話休體，現在我們來進入正題咯：

先來說說水平居中。

CSS水平居中的方法:

1、最常見的margin方法：

給元素設置一個顯示式的寬度，然后加上margin的左右值為auto，示例：

復制代碼

代碼如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.center {
width: 960px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="center">
</div>
</body>
</html>

上面這個是有帶有寬度的div塊。如果是沒有設置的div塊，我們還可以這樣設置，exp:

復制代碼

代碼如下:
.center {
margin: 0 auto;
}

如此這般！就可以了！

0表示設置元素center的上下外邊距為0。

優點：實現方法簡單易懂，瀏覽器兼容性極強；
缺點：擴展性差，無法自適應未知項狀況，而且容易出現元素擠壓的情形

2、text-again：center

這是大家都很熟悉并且經常使用到的文本居中。簡單、快捷，暴力、方便。缺點就是只能用于文本
還是做個例子：

復制代碼

代碼如下:
.center{
border: 1px solid maroon;
width: 200px;
text-align: center;
height: 100px;
}
<div class="center">
這里是文本
</div>

第二種就醬紫了。

3、使用inline-block 和 text-again 使塊級元素居中的方法：

復制代碼

代碼如下:
<span style="font-weight: normal;"> .pagination {
text-align: center;
}
.center {
display: inline-block;
zoom: 1;
}
t;div class="pagination">
<div class="center">
這里是文本
</div>
t;/div></span>

使用該方法的關鍵點在于需要在元素的父級元素中設置text-center屬性為center

這中方法簡單，擴展性強。缺點就是要解決inline-block的兼容的問題。

4、利用浮動的包裹性和相對定位的百分比數據值特性，傳說稱之為“相對浮動”：

這里我給大家做個例子大家就都明白了.

復制代碼

上一篇：css及js調用方法詳細匯總

下一篇：clear:both后margin-top不起作用其他左右下都起作用

發表評論

共有條評論