Web前端面试指导(十四):如何居中一个元素(正常绝对定位浮动元素)?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Web前端面试指导(十四):如何居中一个元素(正常绝对定位浮动元素)?相关的知识,希望对你有一定的参考价值。

题目点评

这道题目的提问比较多,连续问了三个问题,正常元素、绝对定位元素、互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要清楚。可以先把水平居中各种情况说清楚,然后在把垂直居中说清楚。

(一)元素水平居中的方式

1)行级元素水平居中对齐(父元素设置 text-align:center)      

[html] view plain copy 技术分享技术分享

  1. <div style="width: 200px; height: 100px;border: 1px solid;text-align:center;">    

  2.     <span>行级元素垂直居中</span>     

  3. </div>   

          技术分享

2)   块级元素水平居中对齐(margin: 0 auto)

[html] view plain copy 技术分享技术分享

  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 plain copy 技术分享技术分享

  1. <div class="outerbox">  

  2.  <div class="innerbox">我是浮动的</div>  

  3. </div>  

CSS样式

[css] view plain copy 技术分享技术分享

  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 plain copy 技术分享技术分享

  1. <div class="outerbox">  

  2.    <div>我是浮动的</div>  

  3. </div>  

css代码

[css] view plain copy 技术分享技术分享

  1. .outerbox{  

  2.     background-color:pink; /*方便看效果 */    

  3.     width:500px ;   

  4.     height:300px/*高度可以不设*/  

  5.     margin-150px 0 0 -250px/*使用marin向左移动250px,保证元素居中*/  

  6.     position:relative;   /*相对定位*/  

  7.     left:50%;  

  8.     top:50%;  

  9. }  

技术分享

    4)让绝对定位的元素水平居中对齐

  这种方式非常独特,大家一定要记牢这种方式,会用这种方式的薪资待遇必然高出几千¥

[css] view plain copy 技术分享技术分享

  1. .center{  

  2.          positionabsolute/*绝对定位*/  

  3.          width500px;  

  4.          height:300px;  

  5.          backgroundred;  

  6.          margin0 auto/*水平居中*/  

  7.          left: 0/*此处不能省略,且为0*/  

  8.          right: 0/*此处不能省略,且为0*/  

  9. }  


经验分享:水平居中的主要属性有


1. text-alin:center;

2. margin:0 auto

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

(二)元素垂直居中对齐

1)对行级元素垂直居中(heiht与line-height的值一样)


[css] view plain copy 技术分享技术分享

  1. height:300px;  

  2. line-height:300px;  


技术分享

2)对块级元素垂直居中对齐

2.1 父元素高度固定的情况

1)父元素的height与line-height值相同

2)需要垂直居中的元素

 vertical-align:middle;// 垂直居中对齐

 display:inline|inline-block 块级元素转行级元素

HTML代码


[html] view plain copy 技术分享技术分享

  1. <div class="center">  

  2.     <div class="inner"></div>  

  3. </div>  


CSS代码


[css] view plain copy 技术分享技术分享

  1. .center{  

  2.     width500px;  

  3.     height:300px;  

  4.     line-height300px;  

  5.     border:1px solid;  

  6. }  

  7.  .inner{  

  8.      backgroundblue;  

  9.      width300px;  

  10.      height100px;  

  11.      display: inline-block;  

  12.      vertical-alignmiddle;  

  13.  }  


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

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

--------------------------------------------------------------------------------------------------------------------

如果看不懂,可以看视频操作,代码演示 http://www.chuanke.com/3885380-190205.html


本文出自 “智学无忧1” 博客,转载请与作者联系!

以上是关于Web前端面试指导(十四):如何居中一个元素(正常绝对定位浮动元素)?的主要内容,如果未能解决你的问题,请参考以下文章

Web前端面试指导(十四):如何居中一个元素(正常绝对定位浮动元素)?

Web前端面试指导(十七):一个满屏 品 字布局 如何设计?

web前端—css面试题

Web前端面试指导(十八):用纯CSS创建一个三角形的原理是什么?

Web前端面试指导(二十):JavaScript中如何翻转一个字符串?

Web前端面试题-1