文章目錄
- 一、簡介
- 二、元素水準居中
- 三、元素水準垂直居中
- 3.1 position 元素已知寬度
- 3.2 position transform 元素未知寬度
- 3.3 flex布局
- 3.4 table-cell布局
一、簡介
說明:本篇文章隻是總結一些方法,例子用到的各個元素屬性不做解釋,詳情請看MDN文檔,非常的詳盡,例子在chrome浏覽器下完全好使,IE這個渣渣。
本文出現的錯誤,請大佬們及時指正,人非聖賢孰能無過,如有更好的方法,也請留言,我及時添加!
二、元素水準居中
當然最好使的是:
margin: 0 auto;
居中不好使的原因:
1、元素沒有設定寬度,沒有寬度怎麼居中嘛!
2、設定了寬度依然不好使,你設定的是行内元素。
示例 1:
<div class="box">
<div class="content">
哇!居中了
</div>
</div>
<style type="text/css">
.box {
background-color: #FF8C00;
width: 300px;
height: 300px;
margin: 0 auto;
}
.content {
background-color: #F00;
width: 100px;
height: 100px;
line-height: 100px;//文字在塊内垂直居中
text-align: center;//文字居中
margin: 0 auto;
}
</style>
效果:
三、元素水準垂直居中
3.1 position 元素已知寬度
父元素設定為:position: relative;
子元素設定為:position: absolute;
距上50%,據左50%,然後減去元素自身寬度的距離就可以實作
示例:
<div class="box">
<div class="content">
</div>
</div>
.box {
background-color: #FF8C00;
width: 300px;
height: 300px;
position: relative;
}
.content {
background-color: #F00;
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
}
效果:
3.2 position transform 元素未知寬度
如果元素未知寬度,隻需将上面例子中的margin: -50px 0 0 -50px;替換為:transform: translate(-50%,-50%);
效果如上!
示例:
<div class="box">
<div class="content">
</div>
</div>
.box {
background-color: #FF8C00;
width: 300px;
height: 300px;
position: relative;
}
.content {
background-color: #F00;
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
效果:
3.3 flex布局
示例 :
<div class="box">
<div class="content">
</div>
</div>
.box {
background-color: #FF8C00;
width: 300px;
height: 300px;
display: flex;//flex布局
justify-content: center;//使子項目水準居中
align-items: center;//使子項目垂直居中
}
.content {
background-color: #F00;
width: 100px;
height: 100px;
}
效果:
3.4 table-cell布局
因為table-cell相當與表格的td,td為行内元素,無法設定寬和高,是以嵌套一層,嵌套一層必須設定display: inline-block;td的背景覆寫了橘黃色,不推薦使用。
示例 :
<div class="box">
<div class="content">
<div class="inner">
</div>
</div>
</div>
.box {
background-color: #FF8C00;//橘黃色
width: 300px;
height: 300px;
display: table;
}
.content {
background-color: #F00;//紅色
display: table-cell;
vertical-align: middle;//使子元素垂直居中
text-align: center;//使子元素水準居中
}
.inner {
background-color: #000;//黑色
display: inline-block;
width: 20%;
height: 20%;
}