對于使用CSS屬性使得元素水平垂直居中問題,基本是在前端面試問題中必問的一個問題。由于這個問題的回答要分好幾種情況,我也會寫幾篇文章分別講述。
今天這篇文章我們首先看看,只有一個元素的時候采用絕對定位如何實現水平垂直居中的。
我已經將代碼放到github上,感興趣的同學可以去看看。
https://github.com/zhouxiongking/article-pages/blob/master/articles/position-center/position-absolute-center.html
CSS
我們假定頁面只有一個div元素,目的是通過CSS屬性控制該div元素的水平垂直居中。
因為這篇文章講述的是絕對定位方法,因此要將div的position設置為absolute。為了讓div的水平垂直居中看起來更形象,我們添加border屬性。
通用屬性
接下來我們看看兩種實現方法吧。
在方法1中,我們首先需要使用margin: auto;在普通內容流中,margin: auto;相當于margin-top:0;margin-bottom:0。
其次因為div已經被設置為absolute,脫離文檔流,因此可以方便設置left,top,right,bottom四個值。
將left,top,right,bottom四個之都設置為0,瀏覽器會重新分配一個邊界框,這樣整個元素就會填充body所有可用空間。
為了讓元素能呈現水平垂直居中的狀態,必須給div元素設置高度和寬度,添加height和width屬性。
通過以上描述,我們可以得到以下的CSS屬性。
css屬性
通過在頁面上測試,我們可以得到以下的效果。而且不管瀏覽器窗口大小怎么變化,這個div元素始終是水平垂直居中的狀態。
方法1效果圖
方法2更好理解一些,首先給div設定高度和寬度。
由于position設置為absolute;給div設定left和top屬性都為50%
最后將div的margin-left和margin-top設置為寬度和高度的一半。
通過以上描述,得到以下的CSS代碼。
CSS代碼
通過在頁面上測試,我們可以得到以下效果圖。而且不管瀏覽器窗口大小怎么變化,這個div元素始終是水平垂直居中的狀態。
方法2效果圖
上述兩種方法的CSS屬性都未曾使用CSS3特性,因此不用擔心兼容性問題。
兩種方法均只需要這一個類,就可實現在任何內容塊的水平垂直居中。
是否設置padding值對居中效果沒有影響
元素必須設置高度和寬度,不設置的話將不會有任何效果。
由于必須設置高度,相當于定高,因此為了防止內容邊界溢出,一般需要設置overflow屬性。
方法的優點很明顯,效果也很容易達到;但是方法缺點也是很明顯的,因為有很多元素都未必是定高和定寬的。總的來說還是應該看看實際應用場景。
今天這篇文章只是講解了,使用絕對定位讓元素水平垂直居中。后面會繼續講解其他元素水平垂直居中的情況,敬請期待吧。
/* HTML */
<div class='father'>
<div class='son'></div>
</div>
<style>
.father {
display: table-cell;
vertical-align: middle;
width: 300px;
height: 300px;
border: 3px solid red;
}
.son {
width: 50px;
height: 50px;
background-color: aqua;
}
</style>
復制代碼
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
position: relative;
width: 300px;
height: 300px;
border: 3px solid red;
}
.son {
position: absolute;
background-color: aqua;
width: 50px;
height: 50px;
top: 0;
bottom: 0;
margin: auto;
}
</style>
復制代碼
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
position: relative;
width: 300px;
height: 300px;
border: 3px solid red;
}
.son {
position: absolute;
width: 100px;
height: 100px;
background-color: aqua;
top: 50%;
/* 負margin須是高度的一半 */
margin-top: -50px;
}
</style>
復制代碼
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
position: relative;
width: 300px;
height: 300px;
border: 3px solid red;
}
.son {
position: absolute;
width: 100px;
height: 100px;
background-color: aqua;
/* 注意"-"兩邊要隔開 減去的須是高度的一半*/
top: calc(50% - 50px);
}
</style>
復制代碼
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
position: relative;
width: 300px;
height: 300px;
border: 3px solid red;
}
.son {
position: absolute;
width: 100px;
height: 100px;
background-color: aqua;
top: 50%;
transform: translateY(-50%);
}
</style>
復制代碼
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 300px;
height: 300px;
border: 3px solid red;
line-height: 300px;
}
.son {
background-color: aqua;
width: 100px;
height: 100px;
display: inline-block;
vertical-align: middle;
}
</style>
復制代碼
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 300px;
height: 300px;
border: 3px solid red;
display: flex;
align-items: center;
}
.son {
background-color: aqua;
width: 100px;
height: 100px;
}
</style>
復制代碼
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 300px;
height: 300px;
border: 3px solid red;
display: grid;
}
.son {
background-color: aqua;
width: 100px;
height: 100px;
align-self: center;
}
</style>
復制代碼
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 300px;
height: 300px;
border: 3px solid red;
display: block;
}
.father::after {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.son {
background-color: aqua;
width: 50px;
height: 50px;
display: inline-block;
vertical-align: middle;
}
</style>
復制代碼
<!-- HTML -->
<div class="father">
<div class="hide"></div>
<div class="son"></div>
</div>
<style>
.father {
width: 300px;
height: 300px;
border: 3px solid red;
}
.son {
background-color: aqua;
width: 50%;
height: 50%;
}
.hide {
width: 50px;
height: 25%;
}
</style>
復制代碼
<!-- HTML -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 300px;
height: 300px;
border: 3px solid red;
writing-mode: vertical-lr;
text-align: center;
}
.son {
background-color: aqua;
width: 100px;
height: 100px;
writing-mode: horizontal-tb;
display: inline-block;
}
</style>
復制代碼
作者:soloplayer
鏈接:https://juejin.cn/post/6904138129612439560
來源:掘金
*請認真填寫需求信息,我們會在24小時內與您取得聯系。