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

waterc 发布于2019-08-29 15:32 / 3377人阅读

摘要：包括水平居中，垂直居中，还有水平垂直居中。如果要再要细分，还要分浮动元素绝对定位的居中。样式水平居中的元素图片的水平居中图片的居中，比较特殊。

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、总结：水平居中的通用方式(包含常规元素、浮动、绝对定位)：flex

第二部分：垂直居中

1、常规元素的垂直居中

行内文本元素：line-height

通用(不管行级,块级元素,图片,都通杀)tabel-cell + vertical-align 或 flex

2、浮动元素的垂直居中

定高的元素：(relative + absolute + line-height) + top/bottom或margin-top

通用方式： flex

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

利用绝对定位自身来垂直居中：translateY

通用：flex

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

第三部分：水平垂直居中

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

通用(一列或多列)：(table-cell + vertical-align + text-align) 或 flex

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

通用(一个或多列元素)：flex

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

利用绝对定位来水平垂直居中：relative + translate

通用：flex

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

第一部分：水平居中 1、常规元素的水平居中

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

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

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


   水平居中的元素

图片的水平居中：clear + display + margin

图片的居中，比较特殊。

img {   // 设置这三个属性，就可以居中
    clear: both;
    display: block;
    margin:auto;
}

   水平居中的元素

定宽块级元素：margin:0 auto;

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

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


   水平居中的元素

通用方法(不管行还是块元素，通杀)：flex

#outer {
   display:flex;
   justify-content:center;
}


   水平居中的元素

2、浮动元素的水平居中

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

定宽元素：relative + margin-left + left

注意：样式设置在浮动元素本身

样式：
#inner-float {
   position:relative;
   left:50%;
   margin-left:-100px;
}


  我是要居中的浮动元素

不定宽元素：父float + 父relative + 子relative

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

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


  我是要居中的浮动元素

通用(不管是定宽还是不定宽，通杀)：flex

#outer {
    display:flex;
    justify-content:center;
}


  我是要居中的浮动元素

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;
}


  我是要居中的浮动元素

不定宽的元素：relative + left + translateX

#outer {
    position: relative;
}
#inner-absolute {
    left:50%;
    transform:translateX(-50%); // translateX是相对自身来计算的。
}


  我是要居中的浮动元素

通用方式：不管是否宽度，通杀 flex

#outer {
    display:flex;
    justify-content:center;
}


  我是要居中的浮动元素

4、总结：水平居中的通用方式(包含常规元素、浮动、绝对定位)：flex

#outer {
    display:flex;
    justify-content:center;
}


  我是要居中的常规、浮动、绝对定位元素，此办法都适用

第二部分：垂直居中

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

常规元素的垂直居中

行内文本元素：line-height

   #inner {
      line-height:40px;
    }
    

  我是要居中的浮动元素

通用(不管行级,块级元素,图片,都通杀)tabel-cell + vertical-align 或 flex

方式一：diaplay:tabel-cell; vertical-align
#outer {
    display: table-cell;
    vertical-align: middle;
}

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


  我是垂直居中的元素

注意：#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
}


  我是垂直居中的元素

通用： flex

#outer {
    display:flex;
    align-items:center;
}


  我是垂直居中的元素

3、绝对定位的垂直居中

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

利用绝对定位自身来垂直居中：translateY

#outer {
    position: relative;
}
#inner {
    top:50%;
    transform: translateY(-50%); // 相对自身向上移动
}
  

  我是垂直居中的元素

通用： flex

 #outer {
    display: flex; 
    align-items: center;
}
#inner {
    line-height:100px;
}


  我是垂直居中的元素

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

#outer {
    display: flex; 
    align-items: center;
}
#inner {
    line-height:100px;
}


  我是垂直居中的常规、浮动、绝对定位元素

第三部分：水平垂直居中 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; // 适合多列
}

通用：flex // 见下方

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

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

通用(一个或多列元素)：flex // 见下方

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

利用绝对定位来水平垂直居中：relative + translate

 #outer {
    width:400px; // 方便看效果
    height:500px; // 方便看效果
    position: relative;
}
#inner {
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}


  我是水平垂直居中的元素

通用：flex ：见下方

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

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


 我是水平垂直居中的常规、浮动、绝对定位元素

GPU云服务器云服务器水平垂直居中垂直居中实现垂直居中文字垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113384.html

如何居中一个元素（终结版）

摘要：源代码演示利用将要水平排列的块状元素设为，然后在父级元素上设置，达到与上面的行内元素的水平居中一样的效果。前言本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图，请猛戳Github个人博客一、水平居中 1.行内元素水平居...

Hydrogen 2019-08-29 16:56 评论0 收藏0
如何居中一个元素（终结版）

摘要：源代码演示利用将要水平排列的块状元素设为，然后在父级元素上设置，达到与上面的行内元素的水平居中一样的效果。前言本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图，请猛戳Github个人博客一、水平居中 1.行内元素水平居...

hlcc 2019-08-02 11:43 评论0 收藏0
如何居中一个元素（终结版）

摘要：源代码演示利用将要水平排列的块状元素设为，然后在父级元素上设置，达到与上面的行内元素的水平居中一样的效果。前言本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图，请猛戳Github个人博客一、水平居中 1.行内元素水平居...

Meils 2019-08-23 12:20 评论0 收藏0
主流的CSS水平和垂直居中技术大全

摘要：水平居中行内元素的水平居中在父元素中设置只对内联元素或行内块元素有效需要放置于父元素中块级元素的水平居中只对块级元素有效指的是自适应宽度。参考张鑫旭实现绝对定位元素的居中及原理居中方式水平居中垂直居中块级元素设置内联元素设置。原文地址：https://www.xksblog.top/CSS-mainstream-centering-techniques.html 几个月也零零散散学...

KoreyLee 2019-08-29 16:26 评论0 收藏0
CSS元素（文本、图片）水平垂直居中方法

摘要：上下左右负伪元素父容器上设置用于设置为行内元素的水平居中居中元素自身设置用于设置为块级元素的水平居中元素宽度固定，且不能浮动绝对定位 1、text-align:center; 2、margin:0 auto; 3、display:inline-block; + text-align:center; 4、position:relative; + float:left; 5、line-heig...

wuyangnju 2019-04-23 13:08 评论0 收藏0