水平居中垂直 / 垂直居中是前端開發中常見的需求,今天就總結一下各式各樣的水平 / 垂直居中,為方面描述,以下代碼中外層div統一類名為.wrapper。
以下代碼均在http://js.jirengu.com/?html,css,js,output 上運行并展示
1. 水平居中
1.1 內聯元素水平居中
在內聯元素的外層div上用text-align: center
.wrapper {
text-align: center;
}
1.2 定寬塊級元素水平居中
直接margin: 0 auto; 當然上下外邊距可以隨便設 注意必須是固定寬度的塊級元素!
問:為什么?
不是固定寬度的話塊級元素默認為100%父級寬度談何居中?
1.3.1 多個塊級元素水平居中(inline-block方法)
<div class="wrapper">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
.wrapper {
text-align: center;
border: 1px solid #ccc; /*為了看的清晰加上外層邊框*/
}
.inner {
width: 200px;
height: 200px;
background: red;
border: 1px solid #ccc; /*子盒子也加上邊框*/
display: inline-block;
}
展示效果:
image.png
但這種方法有一個問題!
當頁面寬度不夠時變會變形
image.png
如果需要保持居中不變形,可以在body上加上min-width,讓頁面小于一定寬度時出現滾動條。
1.3.2 多個塊級元素水平居中(flex-box方法)
用flex布局可以輕松實現多個塊級元素水平居中,并且頁面寬度不夠時不會出現變形,但會調整每個子元素的寬度和高度。
.wrapper {
display: flex;
justify-content: center;
}
最終效果:
image.png
寬度不夠時:
image.png
2. 垂直居中
2.1.1 單行文本垂直居中(padding填充)
上下填充高度一致即可
span {
padding: 10px 0;
}
2.1.2 單行文本垂直居中(行高控制)
在外層元素上設置line-height等于height,如果外層元素未設置高度,會以line-height高度作為高度
.wrapper {
height: 100px;
line-height: 100px;
}
2.2.1 多行文本垂直居中(padding填充)
同上。
2.2.2 多行文本垂直居中(table-cell展示)
不做詳細介紹,不常用,需要可以google
2.2.3 多行文本垂直居中(flex)
注意:此方法只在外層元素定高時有效,且flex布局會將內部子元素變成block類型!!!
.wrapper {
height: 200px;
display: flex;
justify-content: center;
flex-direction: column;
}
2.3.1 定高塊級元素垂直居中
利用子元素相對父級絕對定位和負邊距
.wrapper {
position: relative
}
.child { /*要居中的塊級元素*/
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
2.3.2 不定高塊級元素垂直居中
將2.3.1的margin-top改為
transform: translateY(-50%);
2.3.3 任意塊級元素垂直居中(flex)
會將居中元素內的文本也垂直居中
.wrapper {
display: flex;
flex-direction: column;
justify-content: center;
}
3. 水平垂直居中
3.1 定高
絕對定位+負邊距
3.2 不定高
絕對定位+transform: translate(-50%,-50%);
3.3 flex
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
3.4 grid布局
尚未學習,可自行Google~