Web前端面試指導(dǎo)(十四)：如何居中一個元素（正常、絕對定位、浮動元素）?

時間：2023-07-21 07:36:02 | 來源：網(wǎng)站運營

時間：2023-07-21 07:36:02 來源：網(wǎng)站運營

Web前端面試指導(dǎo)(十四)：如何居中一個元素（正常、絕對定位、浮動元素）?：

題目點評

這道題目的提問比較多，連續(xù)問了三個問題，正常元素、絕對定位元素、互動元素如何居中，而且居中沒有說清楚是垂直居中還是水平居中，要回答清楚這個問題，必須得有深厚的功底，而且要分類的來回答，條理要清楚?？梢韵劝阉骄又懈鞣N情況說清楚，然后在把垂直居中說清楚。

（一）元素水平居中的方式

1）行級元素水平居中對齊（父元素設(shè)置 text-align:center）


[html]

view plaincopy

1. <div style="width: 200px; height: 100px;border: 1px solid;text-align:center;">
2. <span>行級元素垂直居中</span>
3. </div>

2) 塊級元素水平居中對齊（margin: 0 auto）


[html]

view plaincopy

1. <div style="width: 200px; height: 100px;border: 1px solid;text-align: center;">
2. <div style="border: 1px solid red;margin: 0 auto;height: 50px;width: 80px;"> 塊級元素水平居中</div>
3. </div>

3）浮動元素水平居中

• 寬度不固定的浮動元素

html代碼
[html]view plaincopy

1. <div class="outerbox">
2. <div class="innerbox">我是浮動的</div>
3. </div>

CSS樣式


[css]view plaincopy

1. .outerbox{
2. float:left;
3. position:relative;
4. left:50%;
5. }
6. .innerbox{
7. float:left;
8. position:relative;
9. right:50%;
10. }

• 寬度固定的互動元素

html代碼
[html]view plaincopy

1. <div class="outerbox">
2. <div>我是浮動的</div>
3. </div>

css代碼


[css]view plaincopy

1. .outerbox{
2. background-color:pink; /*方便看效果 */
3. width:500px ;
4. height:300px; /*高度可以不設(shè)*/
5. margin: -150px 0 0 -250px; /*使用marin向左移動250px，保證元素居中*/
6. position:relative; /*相對定位*/
7. left:50%;
8. top:50%;
9. }

4）讓絕對定位的元素水平居中對齊

這種方式非常獨特，大家一定要記牢這種方式，會用這種方式的薪資待遇必然高出幾千￥


[css]view plaincopy

1. .center{
2. position: absolute; /*絕對定位*/
3. width: 500px;
4. height:300px;
5. background: red;
6. margin: 0 auto; /*水平居中*/
7. left: 0; /*此處不能省略，且為0*/
8. right: 0; /*此處不能省略，且為0*/
9. }

經(jīng)驗分享：水平居中的主要屬性有

1. text-alin:center;

2. margin:0 auto

3. position:relative|absolute; left:50%;

（二）元素垂直居中對齊

1）對行級元素垂直居中（heiht與line-height的值一樣）


[css]

view plaincopy

1. height:300px;
2. line-height:300px;

2）對塊級元素垂直居中對齊
2.1 父元素高度固定的情況

1）父元素的height與line-height值相同


2）需要垂直居中的元素

vertical-align:middle;// 垂直居中對齊


display:inline|inline-block 塊級元素轉(zhuǎn)行級元素

HTML代碼


[html]view plaincopy

1. <div class="center">
2. <div class="inner"></div>
3. </div>

CSS代碼

[css]view plaincopy

1. .center{
2. width: 500px;
3. height:300px;
4. line-height: 300px;
5. border:1px solid;
6. }
7. .inner{
8. background: blue;
9. width: 300px;
10. height: 100px;
11. display: inline-block;
12. vertical-align: middle;
13. }

2.2 父元素高度不固定的情況

父元素的padding-top和padding-bottom一樣