css 元素居中顯示及相關屬性分享
本周分享
目錄
- css 元素居中顯示及相關屬性分享
- 一、 前言 ：
- 二、 居中顯示的分類
- 三、 居中顯示的方法及效果
- ①水平居中的方法及效果：
- ②垂直居中的方法及效果：
- 四、 子元素的兩種情況
- ①當確定子元素的寬度的情況
- ②當不確定子元素寬度的情況
- 五、 總結：
一、 前言 ：
當使用HTML進行網頁布局的時候， 經常會把一些元素居中顯示在網頁中或者父元素當中，那么就會用到一些css屬性來定義元素，使其居中顯示，當然方法有很多，下面主要分析一下常用（兼容）的一些居中樣式方法，
二、 居中顯示的分類
元素的居中顯示主要分為兩種： 水平居中 和 垂直居中
- 水平居中： 讓元素在水平方向始終保持一個居中位置顯示，
- 垂直居中： 讓元素在垂直方向顯示一個居中的效果，
三、 居中顯示的方法及效果
①水平居中的方法及效果：
方法一：
代碼塊;
div{
width: 130px;
height: 130px;
background-color: blue;
color: chartreuse;
margin: 0 auto;
}
效果圖：
原理：此方法較兼容，margin屬性可以在任何情況下，使元素水平居中，表示上下0像素，左右（auto）居中，
方法二： 定位 + margin
代碼塊：
.fater{
position:relative;
width: 300px;
height: 300px;
border: 2px solid red;
}
.fater div{
position: absolute;
width: 130px;
height: 130px;
background-color: blue;
color: chartreuse;
left: 0;
right: 0;
margin: auto;
效果圖：
原理：此方法有無父元素或者任何元素都可以水平居中顯示，子元素絕對定位以后，left和right都為0，margin：auto（居中），
方法三：
text-alian屬性：它是將行內元素水平居中顯示，適用inline，inline-block,inline-table ,inline-flex等
效果圖：
方法四： flex布局
代碼塊：
.wrapBox2{
width: 300px;
height: 300px;
background: blue;
display: flex;
justify-content: center;
align-items: center;
}
/*注意：即使不設定子元素為行塊元素也不會獨占一層*/
.wrapItem2{
width: 100px;
height: 50px;
background:green;
原理:將父級元素設定為流式布局，根據flex布局的屬性特性，設定子元素居中，flex布局靈活，不需要對子元素進行任何的設定，缺點：子元素的float、clear、position等無法使用，如果有其他布局，容易產生影響，
方法五： 偽元素居中
代碼塊：
.fater{
height: 200px;
text-align: center;
vertical-align: middle;
}
.child{
width: 100px;
height: 100px;
display: inline-block;
vertical-align: middle;
}
.fater::before{
content: "";
width: 20px;
height: 200px;
display: inline-block;
vertical-align: middle;
}
方法六：
代碼塊：
.fater{
position:relative;
width: 300px;
height: 300px;
border: 2px solid red;
}
.fater div{
position: absolute;
width: 130px;
height: 130px;
background-color: blue;
color: chartreuse;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50% , -50%);
}
效果圖：
原理：類似于已知寬高的實作方式，只不過當前居中元素寬高未知，所以需要自動獲取當前居中元素的寬高，translate屬性正好實作了該功能，
②垂直居中的方法及效果：
方法一：
代碼塊;
.fater{
position:relative;
width: 300px;
height: 300px;
border: 2px solid red;
}
.fater div{
position: absolute;
width: 130px;
height: 130px;
background-color: blue;
color: chartreuse;
bottom: 0;
top:0;
margin:auto;
}
效果圖：
原理： 此方法是在定位的基礎上，通過 bottom: 0; top:0;兩個值，margin居中來實作的，
方法二： line-height(單行文本)
代碼塊：
.fater{
width: 300px;
height: 300px;
line-height: 300px;
border: 2px solid red;
}
效果圖：
原理：有時行內元素或文本能夠做到垂直居中，當line-height與height相等是，文字垂直居中，
方法二： table元素
代碼塊 ：
.fater{
width: 300px;
height: 300px;
border:2px solid red;
}
.fater table{
width:100%;
height:100%;
}
.centerWrap{
text-align: center;
vertical-align: middle;
}
.centerItem{
display: inline-block;
background:pink;
}
原理：使用table標簽進行布局，主要還是使用了vertical-align屬性和text-align屬性，但是相對于上一種方式，使用table標簽會產生大量的冗余代碼，不推薦使用
四、 子元素的兩種情況
①當確定子元素的寬度的情況
定寬塊狀元素的居中顯示
定寬塊狀元素及寬度width為固定值的塊狀元素，這類元素的水平居中顯示可以通過設定左右margin值為auto實作
例如，設定定寬塊狀元素div進行水平居中顯示
<body>
<div>水平居中顯示</div>
</body>
進行居中設定的CSS樣式
```css
div{
width:200px;/*定寬*/
margin:20px auto;
margin-left
margin-right設定為auto
}
②當不確定子元素寬度的情況
不定寬塊狀元素的居中顯示
不定寬塊狀元素指的是寬度width不固定的塊狀元素
不定寬塊狀元素的水平居中設定方法有：
（1）使用table標簽
（2）將顯示型別設定為行內元素，使用display:line進行設定
（3）利用相對定位的方式，將元素向左移動50%，即設定position:relative和left:50%
transform：translate（x,y）法
五、 總結：
一般比較好用的居中方法就是定位加外邊距來實作，text-alian水平居中和 line-height垂直居中屬性最為常用，
在網頁布局中，當我們既需要水平居中，而且還需要垂直居中，就可以把垂直和水平的相結合使用，從而實作上下左右全居中顯示的效果，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/258199.html
標籤：其他
上一篇：用web撰寫100以內的加法