手把手教你CSS水平、垂直居中的10種方式(小結(jié))
我要評論面試必備，工作一定會用到。emmm大家都懂的，話不多說，先直接貼一個總結(jié)和效果圖。
總結(jié)
- PC端有兼容性要求，子元素寬高固定，推薦absolute + 負(fù)margin
- PC端有兼容要求，子元素寬高不固定，推薦absolute + transform
- PC端無兼容性要求，推薦flex
- 移動端推薦使用flex
要怎么實現(xiàn)上面這幅圖的效果呢，下面為大家總結(jié)了10中常用的方法。首先我先創(chuàng)建一個公共的模板樣式
<template>
<div class="two">
<div class="parent">
<div class="child">123</div>
</div>
</div>
</template>
<style lang="less" scoped>
.parent{
margin: 0 auto;
width: 300px;
height: 300px;
border: 1px solid red;
box-sizing: border-box;
.child {
height: 100px;
width: 100px;
background: #2f8df0;
}
}
</style>
然后具體用到的樣式單獨寫在方法里面，首先先介紹4個平時布局的技巧。
1.水平居中div里面的div，設(shè)置子元素的寬度。
.parent{
width:300px;
margin:0 auto;
}
注意：如果子元素設(shè)置了display:table-cell，那么margin:0 auto;將會失效。
2.設(shè)置文字垂直居中，設(shè)置包含文字div的高。
.child{
text-align：center
line-height:100px //知道子元素的高,設(shè)置和高一樣的高度
}
3.兩個或者多個塊級元素垂直居中對齊，父元素設(shè)置height和line-height相等。
.parent{
line-height: 300px; //知道父元素的高,設(shè)置和高一樣的高度
}
.child1{
display: inline-block;
vertical-align: middle;
line-height: initial; //initial 關(guān)鍵字用于設(shè)置 CSS 屬性為它的默認(rèn)值。
}
.child2{
display: inline-block;
vertical-align: middle;
line-height: initial; //initial 關(guān)鍵字用于設(shè)置 CSS 屬性為它的默認(rèn)值。
}
4.讓一個元素充滿當(dāng)前整個容器，設(shè)置absolute
.parent{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
OK，介紹完畢，下面開始介紹CSS實現(xiàn)水平垂直居中的方式。
1.不需要設(shè)置子元素的寬高，需要設(shè)置父元素的高度。使用 absolute + transform （推薦）
.parent{
position: relative
}
.child{
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
// 備注一下，如果只需要上下居中那就只要保留top,只要左右居中的話就保留left，translate設(shè)置
translateY(-50%)或者translateX(-50%)
2.不需要設(shè)置子元素的寬高，不需要設(shè)置父元素的寬高。 使用flex布局（建議移動端直接使用flex
pc端看需要兼容的情況。）
.parent{
display:flex;
align-items:center;
justify-content:center;
}
.child{
}
3.不需要設(shè)置子元素的寬高，需要設(shè)置父元素的高度。使用 lineheight。
注意：這種方法需要通過text-align在子元素中將文字顯示重置為想要的效果
.parent{
line-height: 300px; //設(shè)置和父元素的高度一樣
text-align: center;
}
.child{
display: inline-block;
vertical-align: middle;
line-height: initial; //initial 關(guān)鍵字用于設(shè)置 CSS 屬性為它的默認(rèn)值。
text-align: left; //將文字顯示重置為想要的效果
}
4.不需要設(shè)置子元素的寬高，需要設(shè)置父元素的高度。使用css-table (使用之后此元素的margin:0 auto會失效)
.parent{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child{
display: inline-block;
}
5.設(shè)置子元素的寬高，設(shè)置父元素的高度。 使用absolute + 負(fù)margin
.parent{
position: relative
}
.child{
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px; //知道子元素的寬高
margin-top: -50px; //知道子元素的寬高
}
6.設(shè)置子元素的寬高，設(shè)置父元素的高度。使用 absolute + margin auto
.parent{
position: relative
}
.child{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
7.設(shè)置子元素的寬高，設(shè)置父元素的高度。 使用 absolute + calc(這種方法兼容性依賴calc的兼容性)
.parent{
position: relative
}
.child{
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
8.使用writing-mode（使用起來比較復(fù)雜，不推薦）
//公共的樣式在最上面
<div class="parent">
<div class="box-child">
<div class="child">123</div>
</div>
</div>
.parent{
writing-mode: vertical-lr; //改變文字顯示的方向
text-align: center;
}
.box-child{
writing-mode: horizontal-tb;
display: inline-block;
text-align: center;
width: 100%;
}
.child{
text-align: left; //將文字顯示重置為想要的效果
margin: 0 auto;
}
9.不需要設(shè)置子元素的寬高，不需要設(shè)置父元素的寬高。 使用grid布局（不建議使用，目前兼容性不是很好）
.parent{
display: grid;
}
.child{
align-self: center;
justify-self: center;
}
10.使用table布局（純粹湊方法，這年頭，誰還用table布局呀，哈哈哈哈）
<table>
<tbody>
<tr>
<td class="parent">
<div class="child">123</div>
</td>
</tr>
</tbody>
</table>
.parent{
text-align: center;
}
.child{
display: inline-block;
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了使用CSS實現(xiàn)盒子水平垂直居中的方法(8種)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來2020-11-11- 這篇文章主要介紹了CSS 水平居中并限定最大的寬度實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)2020-09-14
- 這篇文章主要介紹了CSS實現(xiàn)子元素div水平垂直居中的示例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起2020-09-03
CSS中的translate(-50%,-50%)實現(xiàn)水平垂直居中效果
這篇文章主要介紹了CSS中的translate(-50%,-50%)實現(xiàn)水平垂直居中效果,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以2020-09-02css3 flex實現(xiàn)div內(nèi)容水平垂直居中的幾種方法
這篇文章主要介紹了css3 flex實現(xiàn)div內(nèi)容水平垂直居中的幾種方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小2020-03-27- 這篇文章主要介紹了CSS3 不定高寬垂直水平居中的幾種方式,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起2020-03-26
CSS3實現(xiàn)水平居中、垂直居中、水平垂直居中的實例代碼
在前端面試中經(jīng)常會遇到css居中效果的實現(xiàn)，今天小編給大家分享幾種css垂直水平居中的方法，通過實例代碼給大家講解，需要的朋友參考下吧2020-02-27
如何讓子元素在父容器中水平垂直居中呢，下面我們來列舉幾種常見的方法，通過真實場景分析給大家詳解web前端之css水平居中代碼解析，感興趣的朋友跟隨小編一起看看吧2021-05-20
