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

原创 2016年09月26日 16:34:07

题目点评

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

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

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

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

          

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

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

3)浮动元素水平居中

  • 宽度不固定的浮动元素
html代码
 <div class="outerbox">
  <div class="innerbox">我是浮动的</div>
 </div>

CSS样式

.outerbox{
float:left; 
position:relative; 
left:50%; 
} 
.innerbox{ 	
float:left; 
position:relative; 
right:50%; 
}

  • 宽度固定的互动元素
html代码
<div class="outerbox">
   <div>我是浮动的</div>
</div>

css代码

 .outerbox{
     background-color:pink; /*方便看效果 */  
     width:500px ; 
     height:300px; /*高度可以不设*/
     margin: -150px 0 0 -250px; /*使用marin向左移动250px,保证元素居中*/
     position:relative;   /*相对定位*/
     left:50%;
     top:50%;
 }

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

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

.center{
         position: absolute; /*绝对定位*/
         width: 500px;
         height:300px;
         background: red;
         margin: 0 auto; /*水平居中*/
         left: 0; /*此处不能省略,且为0*/
         right: 0; /*此处不能省略,且为0*/
}

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

1. text-alin:center;

2. margin:0 auto

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

(二)元素垂直居中对齐

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

 height:300px;
 line-height:300px;

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

2.1 父元素高度固定的情况

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

2)需要垂直居中的元素

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

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

HTML代码

<div class="center">
    <div class="inner"></div>
</div>

CSS代码

     .center{
         width: 500px;
         height:300px;
         line-height: 300px;
         border:1px solid;
     }
      .inner{
          background: blue;
          width: 300px;
          height: 100px;
          display: inline-block;
          vertical-align: middle;
      }

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

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

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

如何实现浮动元素水平居中

浮动元素如何水平居中?margin:0 auto为什么不起作用?其实方法很简单,只需要在浮动元素外面再嵌套一层div,使嵌套的div宽度为浮动元素宽度之和,即可实现真正的水平居中。...

如何居中一个设置了浮动的元素

对于一个没有浮动的元素,我们通常可以通过对其设置margin:0 auto;来实现元素的居中,但是这个方法对于浮动元素却失去了作用,其实我们可以理解的是,在脱离文档流后,浮动的力量其实就是auto的力...

关于元素浮动后垂直居中和水平居中的方法

这些方法也是在网上看网友的经验,以后可能用的着 子元素在父元素里面垂直居中 #d1{ border:thin solid red; width:900px; heig...

如何让浮动的元素垂直居中

如何让浮动的元素垂直居中 一:   解释:我们可以通过子绝父相的定位方式让子元素的left和top都移动50%,这个时候是整个元素移动到了父元素一半的位置,并不是两个元素的中线对齐,所以我们需要让子元...

CSS 元素垂直居中的 6种方法

转自:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E...

如何居中一个浮动元素

原文出处:http://blog.sina.com.cn/s/blog_8d322eff010192wx.html 回答:设置容器的浮动方式为相对定位 然后确定容器的宽高 比如宽500 高 300 的...

块状元素居中/浮动元素居中/绝对定位元素居中/内容居中

块状元素:margin-left=auto;margin-right=auto; 浮动块状元素:外包装块“float:left;position:relative;left:50%”;内部块“flo...

如何在一个div中使其子div居中

今天要讲的主要内容如题,**即如何在一个div中使其子div居中**。我在网上其他地方也看到过对其的不同实现方式,几天主要做一个详细的汇总,希望对大家有帮助。...

实现div水平、垂直居中的几种方法

1、最常用的,也是最简单的(利用position定位、再用margin偏移) 实现div水平垂直居中 body{ background: #272822; } .te...

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Web前端面试指导(十四):如何居中一个元素(正常、绝对定位、浮动元素)?
举报原因:
原因补充:

(最多只允许输入30个字)