水平居中、垂直居中、水平垂直居中、浮动居中、绝对定位居中.......帮你搞定...

2018.05.29

居中一个元素?你会想到啥?这里面的知识还真不少。包括水平居中,垂直居中,还有水平垂直居中。 如果要再要细分,还要分浮动元素、绝对定位的居中。

为了代码简介,没有加背景和其他样式,需要看效果的,可以加上背景。

目录:

  • 第一部分:水平居中

    • 1、常规元素的水平居中

      • 行内元素、不定宽块级元素:text-align
      • 图片的水平居中 :clear + display + margin
      • 定宽块级元素:margin:0 auto;
      • 通用方法(不管行还是块元素,通杀):flex
    • 2、浮动元素的水平居中

      • 定宽元素:relative + margin-left + left
      • 不定宽元素:父float + 父relative + 子relative
      • 通用(不管是定宽还是不定宽,通杀):flex
    • 3、绝对定位元素的水平居中

      • 定宽的元素:relative + left + ...
      • 不定宽的元素:relative + left + translateX
      • 通用方式:不管是否宽度,通杀 flex
    • 4、总结:水平居中的通用方式(包含常规元素、浮动、绝对定位):

  • 第二部分:垂直居中

    • 1、常规元素的垂直居中

      • 行内文本元素:line-height
      • 通用(不管行级,块级元素,图片,都通杀)tabel-cell + vertical-align 或 flex
    • 2、浮动元素的垂直居中

      • 定高的元素:(relative + absolute + line-height) + top/bottom或margin-top
      • 通用方式: flex
    • 3、绝对定位元素的垂直居中

      • 通用:transfrom 或 flex
    • 4、总结:垂直居中的通用方式(包含常规元素、浮动、绝对定位):

  • 第三部分:水平垂直居中

    • 1、常规元素的水平垂直居中

      • 通用(一列或多列):(table-cell + vertical-align + text-align) 或 flex
    • 2、浮动元素的水平垂直居中

      • 通用(一个或多列元素):flex
    • 3、绝对定位元素的水平垂直居中

      • 利用绝对定位来水平垂直居中:relative + translate
      • 通用:flex
    • 4、总结:水平垂直居中的通用方式(包含常规元素、浮动、绝对定位):

第一部分:水平居中

1、常规元素的水平居中

  • 行内元素、不定宽块级元素:text-align

注意:将div#inner 换成 span#inner 效果一样。

样式:
#outer {text-align:center}

<div id='outer'>
   <div id='inner'>水平居中的元素</div>
</div>

复制代码
  • 图片的水平居中 :clear + display + margin

图片的居中,比较特殊。

img {   // 设置这三个属性,就可以居中
    clear: both;
    display: block;
    margin:auto;
}
<div id='outer'>
   <img src="on1.png" >水平居中的元素</div>
</div>
复制代码
  • 定宽块级元素:margin:0 auto;

注意:样式是在inner元素中添加

样式:
#inner {width:200px;margin:0 auto;}

<div id='outer'>
   <div id='inner'>水平居中的元素</div>
</div>

复制代码
  • 通用方法(不管行还是块元素,通杀):flex
#outer {
   display:flex;
   justify-content:center;
}

<div id='outer'>
   <div id='inner'>水平居中的元素</div>
</div>
复制代码

2、浮动元素的水平居中

由于元素浮动之后,其本身就相当于设置了display:inline-block;也就是可以设置宽和高了。 所以浮动元素,没有行级和块之分,都是块级或inline-block的元素;只有定宽和不定宽之分 参考:浮动与宽高

  • 定宽元素:relative + margin-left + left 注意:样式设置在浮动元素本身
样式:
#inner-float {
   position:relative;
   left:50%;
   margin-left:-100px;
}

<div id="outer">
  <span id="inner-float" style="float: left;width: 200px;">我是要居中的浮动元素</span>
</div>
复制代码
  • 不定宽元素:父float + 父relative + 子relative

注意:要清除浮动,给外部元素加上float。这里的父元素就是外部元素

#outer {
    float:left;
    position:relative;
    left:50%;
}
#inner-float {
    position:relative;
    left:-50%; 或 right:50%
}

<div id="outer">
  <span id="inner-float" style="float: left;">我是要居中的浮动元素</span>
</div>
复制代码
  • 通用(不管是定宽还是不定宽,通杀):flex
#outer {
    display:flex;
    justify-content:center;
}

<div id="outer">
  <span id="inner-float" style="float: left;width: 200px;">我是要居中的浮动元素</span>
</div>
复制代码

3、绝对定位元素的水平居中

由于元素绝对定位之后,其本身就相当于设置了display:inline-block;也就是可以设置宽和高了。 所以绝对定位元素,没有行级和块之分,都是块级或inline-block的元素;只有定宽和不定宽之分 参考链接:绝对定位与宽度

  • 定宽的元素:relative + left + ...
// 写法一:
#outer {
    position: relative;
}
#inner-absolute {
    left:50%;
    margin-left:-100px;
}
    
// 写法二:
#outer {
    position: relative;
}
#inner-absolute {
    left:0;
    right:0;
    margin:0 auto;
}

<div id="outer">
  <span id="inner-absolute" style="position: absolute;width: 200px;">我是要居中的浮动元素</span>
</div>


复制代码
  • 不定宽的元素:relative + left + translateX
#outer {
    position: relative;
}
#inner-absolute {
    left:50%;
    transform:translateX(-50%); // translateX是相对自身来计算的。
}

<div id="outer">
  <span id="inner-absolute" style="position: absolute;">我是要居中的浮动元素</span>
</div>
复制代码
  • 通用方式:不管是否宽度,通杀 flex
#outer {
    display:flex;
    justify-content:center;
}

<div id="outer">
  <span id="inner-absolute" style="position: absolute;">我是要居中的浮动元素</span>
</div>
复制代码

第二部分:垂直居中

垂直居中,默认外部元素(这里称为父元素)是有高度的

常规元素的垂直居中

  • 行内文本元素:line-height
   #inner {
      line-height:40px;
    }
    
<div id="outer" style="height:40px;">
  <span id="inner">我是要居中的浮动元素</span>
</div>
复制代码
  • 通用(不管行级,块级元素,图片,都通杀)tabel-cell + vertical-align 或 flex
方式一:diaplay:tabel-cell; vertical-align
#outer {
    display: table-cell;
    vertical-align: middle;
}

方式二:flex + align-item
#outer {
    display:flex;
    align-item:center;
}

<div id="outer" style="height:200px;">
  <span id="inner">我是垂直居中的元素</span>
</div>
复制代码

注意:#outer{height:100px;display:table} #inner{display:table-cell;vertical-align: middle;} 也可以达到垂直居中,但是不通用。

2、浮动元素的垂直居中

  • 定高的元素:(relative + absolute + line-height) + top/bottom或margin-top
方式一:relative + absolute + line-height + top/bottom
   #outer {
      position: relative;
    }
    #inner {
      line-height:100px;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
    }

方式二:relative + absolute + line-height + margin-top
#outer {
      position: relative;
}
#inner {
      line-height:100px;
      position: absolute;
      top: 50%;
      margin-top:-50px
}

<div id="outer" style="height:200px;">
  <div id="inner" style="float: left;height: 100px;">我是垂直居中的元素</div>
</div>
复制代码
  • 通用: flex
#outer {
    display:flex;
    align-item:center;
}

<div id="outer" style="height:200px;">
  <div id="inner">我是垂直居中的元素</div>
</div>
复制代码

3、绝对定位的垂直居中

绝对定位元素相当于inline-block:没有行和块之分,只有定高和不定高之分。

  • 通用:transfrom 或 flex
方式一:
#outer {
    position: relative;
}
#inner {
    top:50%;
    transform: translate(0, -50%); // 相对自身向上移动
}
   
方式二:
 #outer {
    display: flex; align-items: center;
}
#inner {
    line-height:100px;
}

<div id="outer" style="height:200px;">
  <div id="inner" style="position: absolute;">我是垂直居中的元素</div>
</div>
复制代码
  - 垂直居中多行元素:div.father{ width:200px;height:100px;display:table-cell;vertical-align: middle;} .child{width:200px;display:inline-block;vertical-align:middle;line-height:30px;}
  - 备注:多行和多列的居中布局,关键父元素的width属性
复制代码

第三部分:水平垂直居中

1、常规元素的水平垂直居中

  • 通用(一列或多列):(table-cell + vertical-align + text-align) 或 flex
方式1一:table-cell + vertical-align + text-align 
#outer {
    width:400px; // 方便看效果
    height:500px; // 方便看效果
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
#inner {
    display:inline-block; // 适合多列
}

方式二:flxe
#outer{
    width:400px; // 方便看效果
    height:500px; // 方便看效果
    display:flex;
    justify-content:center;
    aligns-item:center;
}
#inner {
    display:inline-block; // 适合多列
}

<div id="outer" >
  <div id="inner" >我是垂直居中的元素</div>
</div>
复制代码

2、浮动元素的水平垂直居中

子元素可以设置 mairgin 以及word-wrap:break-word; 方便效果

  • 通用(一个或多列元素):flex
#outer{
    width:400px; // 方便看效果
    height:500px; // 方便看效果
    display:flex;
    justify-content:center;
    aligns-item:center;
}
#inner {
    display:inline-block; // 适合多列
}

<div id="outer" >
 <div id="inner" style="float: left;">我是水平垂直居中的元素</div>
</div>
复制代码

3、绝对定位元素的水平垂直居中

  • 利用绝对定位来水平垂直居中:relative + translate
 #outer {
    width:400px; // 方便看效果
    height:500px; // 方便看效果
    position: relative;
}
#inner {
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}

<div id="outer" >
  <div id="inner" style="position: absolute;">我是水平垂直居中的元素</div>
</div>
复制代码
  • 通用:flex
#outer{
    width:400px; // 方便看效果
    height:500px; // 方便看效果
    display:flex;
    justify-content:center;
    aligns-item:center;
}
#inner {
    display:inline-block; // 适合多列
}

<div id="outer" >
  <div id="inner" style="position: absolute;">我是水平垂直居中的元素</div>
</div>
复制代码

第四部分:垂直居中多行元素 --- 可以不看这里。

  • 垂直居中多行元素:
#outer {
    width:200px;
    height:100px;
    display:tabel-cell;
    vertical-align:middle;
}
#inner {
    width:200px;
    display:inline-block;
    vertical-align:middle;
    line-height:30px;// 方便看效果
}

<div id="outer" >
  <div id="inner" >我是垂直居中的元素</div>
  <div id="inner" >我是垂直居中的元素</div>
</div>
 备注:多行和多列的居中布局,关键父元素的width属性
复制代码

转载于:https://juejin.im/post/5b0d8c4e51882536c25d5308

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值