css 水平垂直居中实现方式

Shihira 发布于2019-08-30 14:17 / 2091人阅读

摘要：水平垂直居中实现方式中有好多实现居中的方式，在项目中经常不知道使用哪种方式会比较好，所以记录下来。块级元素为内部元素设置为，将它转换为行内元素，再对父元素使用可以实现水平居中，缺点就是内部元素无法设置宽度。

css 水平垂直居中实现方式

css中有好多实现居中的方式，在项目中经常不知道使用哪种方式会比较好，所以记录下来。

水平垂直居中包括行内元素居中，以及块级元素居中

行内元素html结构

块级元素结构

基础样式

水平居中 1-行内元素（最简单 text-align: center）

.outer {
    text-align: center;
}

1-块级元素（margin: auto）

当使用这种方式时，内部元素必须定义宽度，不然margin属性会无效

.outer .inner {
    margin: auto;
}

2-块级元素（margin: auto + display: table）

前面这种方式需要为内部元素定义宽度，如果不想定义宽度，可以设置内部元素的display 为 table，它的宽度会由内部元素来撑开。

.outer .inner {
    margin: auto;
    display: table;
}

3-块级元素（display: inline）

为内部元素设置display 为inline，将它转换为行内元素，再对父元素使用text-align: center 可以实现水平居中，缺点就是内部元素无法设置宽度。

.outer {
    text-align: center;
}
.outer .inner {
    display: inline;
}

4-块级元素（display: inline-block）

方案三无法为内部元素设置宽度，但是采用inline-block，则可以为内部元素设置宽度。

.outer {
    text-align: center;
}
.outer .inner {
    display: inline-block;
}

5-块级元素（float: left + transform）

这种方式不需要知道内部元素宽度。

.outer .inner {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

6-块级元素（负边距+绝对定位）

.outer {
    position: relative;
}
.outer .inner {
    position: absolute;
    left: 50%;
    margin-left: -25px;
}

7-块级元素（flexbox）

用的最多的方式，但低版本浏览器会有兼容问题

.outer {
    display: flex;
    justify-content: center;  // 主轴上居中
}

垂直居中 1-行内元素（line-height）

外部元素设置line-height

.outer {
    line-height: 400px;
}

1-块级元素（absolute + top + margin-top）

使用绝对定位将内部元素的顶部定位在中间，再通过margin-top 负值拉回高度，需要提前知道内部元素的高度

.outer {
    position: relative;
}
.outer .inner {
    position: absolute;
    top: 50%;
    margin-top: -25px;
}

2-块级元素（absolute + margin:auto）

这种方式不需要知道内部元素的高度，兼容性也很好

.outer {
    position: relative;
}
.outer .inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

3-块级元素（relative + transform）

前面水平居中的时候也出现过这种方式，也可以使用position: absolute方式，但要对应地将外部元素设置成position: relative

.outer .inner {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

4-块级元素（vertical-align + table-cell）

.outer {
    display: table-cell;
    vertical-align: middle;
}

5-块级元素（vertical-align + inline-block）

原理是新建一个inner的兄弟元素，高度撑开整个容器，再对inner使用vertical-align: middle 使元素居中，不需要知道内部元素的高度

html结构

.outer .inner {
    vertical-align: middle;
    display: inline-block;
}
.outer .slibing {
    height: 400px;
    display: inline-block;
    vertical-align: middle;
}

5-块级元素（伪元素）

原理和上面的方式一样，只是通过伪元素去撑开高度

.inner {
    display: inline-block;
    vertical-align: middle;
}
.outer::before {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

6-块级元素（flexbox）

.outer {
    display: flex;
    align=items: center;
}

欢迎继续补充~

如果喜欢请关注我的Blog，给个Star吧，会定期分享一些JS中的知识，^_^

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

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

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

【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

Apollo 2019-08-30 14:15 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

Scholer 2019-08-02 16:14 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

mayaohua 2019-08-29 18:44 评论0 收藏0
如何居中一个元素（终结版）

摘要：源代码演示利用将要水平排列的块状元素设为，然后在父级元素上设置，达到与上面的行内元素的水平居中一样的效果。前言本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： 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