css居中总结

gxyz 发布于2019-08-30 15:55 / 2207人阅读

摘要：前言一直有个想法要把各种居中的方法总结一下，但还是一直没有时间去整理。最近刚好在做样式重构的项目，顺便把一下自己有用过的或积累的居中方法给总结一下。又必须有个父级对其进行设置居中。

前言

一直有个想法要把各种居中的方法总结一下，但还是一直没有时间去整理。最近刚好在做样式重构的项目，顺便把一下自己有用过的或积累的居中方法给总结一下。

水平居中

行内元素水平居中

行内元素的居中比较简单，直接使用text-align就可以达到居中效果

/* 行内元素 */
.parent4 {
    text-align: center;
}

块级元素水平居中(块级水平居中方法列举以下几种)

margin auto

这是最常用到的块级水平居中，利用margin:auto自动达到居中的效果，不过前提是子元素必须知道宽度

缺点：必须提前知道元素的尺寸

/* 必须设置子元素宽度 */
.child1 {
    width: 100px;
    height: 100px;
    margin: 0 auto; 
    background: aqua;
}

利用inline-block实现水平居中

缺点: 必须有个父元素对其设置text-align

.parent2 {
  
    text-align: center;

}

/* 必须通过父元素 */
.child2 {
    display: inline-block;
    /*width: 100px;
    height: 100px;*/
    background: aqua;
}

利用css3新增的width属性fit-content实现

很多情况下我们并不清楚一个元素的具体尺寸是多少，但是又要实现水平居中。这个时候我们想起float，自动撑开宽高，但是可惜的是float的脱离了文档流并不能用margin:auto去实现元素的水平居中。inline-block又必须有个父级对其进行设置居中。css3新增加了width里的属性实现了元素类似于float,inline-block的包裹效果，并且可以使用margin: auto进行居中。fit-content会根据你的内容去包裹你的元素。在此处不细说明，该兴趣的小伙伴可以看看张鑫旭老师对这几个新增的属性的讲解

/* width的其他属性 */
 .parent3 {
    width: fit-content;
    margin: 10px auto;
    background: aquamarine;

}

垂直居中

行内元素垂直居中

line-height实现当行文字垂直居中

  /* 行内元素，当行文字垂直居中 */
    .parent1 {
        height: 100px;
        line-height: 100px;
        background: wheat;
    }

块级元素垂直居中(块级元素居中的方法比较多，总结如下)

margin负边距实现

该方法使用绝对定位利用margin负值将其居中，前提是需要提前知道尺寸

优点：兼容性不错

缺点：需要提前知道尺寸

    .parent2 {
        position: relative;
        background: rosybrown;
        height: 100px;
    }
    .child2 {  
        background: blue;
        position: absolute;
        width: 80px;
        height: 40px;
        left: 50%;
        top: 50%;
        margin-top: -20px;
        margin-left: -40px;
    }

如何在不知道尺寸的情况下垂直居中呢，CSS3——translate属性的出现为我们提供了可能。该方法利用translate以自身的宽高为基准来达到居中效果，相当于margin负值的作用，不过我们不需要知道尺寸，translate帮我们解决了。transform中translate偏移的百分比值是相对于自身大小的，

优点: 不需要提前知道尺寸

缺点: 兼容性不好(在移动端上基本支持)

/* 块级元素： 绝对定位 + transform  优点: 不需要提前知道尺寸
缺点: 兼容性不好*/
.parent3 {
    position: relative;
    background: antiquewhite;
    height: 200px;
}
.child3 {
    background: salmon;
    position: absolute;
    width: 80px;
    height: 40px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

块级元素：绝对定位 + margin: auto;

结合以上两种，在介绍一个利用绝对定位的一个很好用的方法
这是从张鑫旭老师的博客搬运过来的详情戳这里。

优点：不需要根据宽高去做相应的位移，自动帮你居中好了，兼容性好

/* 块级元素：绝对定位 + margin: auto; 优点：不需要根据宽高去做相应的位移，兼容性好 */
.parent4 {
    position: relative;
    background: wheat;
    height: 200px;
}
.child4 {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: blue;
}

利用display: table-cell实现垂直居中

display的table和table-cell一般情况下用的不多，所以很少有人去关注它。这个实现的原理就是把其变成表格样式，再利用表格的样式来进行居中，在某些情况下还是很方便的。

/* 块级元素：display: table-cell */
.parent5 {
    width: 600px;
    height: 200px;
    border: 1px solid red;
    display: table;
}
.child5 {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
 
/* 水平垂直居中 */
.parent7 {
    width: 400px;
    height: 300px;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid red;
}
.child7 {
    display: inline-block;
    vertical-align: middle;
    background: blue;
}

利用calc()计算属性

缺点: 兼容性差，需要计算，消耗性能，需要提前知道尺寸

.parent8 {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    position: relative;
}
.child8 {
    top:-webkit-calc(50%-50px);
    top:-moz-calc(50%-50px);
    top:calc(50%-50px);
    left:-webkit-calc(50%-50px);
    left:-moz-calc(50%-50px);
    left:calc(50%-50px);
    width: 100px;
    height: 100px;
    background: blue;
    
}

利用伪元素实现居中(这个原理我还没搞懂，但是实践过真的ok)

.parent9 {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    text-align: center;
}
.child9 {
    background: blue;
    width: 100px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
}
.parent9::before {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

块级元素：display: flex

缺点：在pc上兼容性不好

.parent10 {
    width: 600px;
    height: 200px;
    border: 1px solid red;
    display: flex;
    align-items: center;  /*垂直居中*/
    justify-content: center;  /*水平居中*/
}
.child10 {
    background: blue;
}

总结

以上是分别总结了水平居中和垂直居中常用的方法，要想实现水平垂直居中可以自己组合搭配一下。方法目前总结了这几种，之后有新的方法也会持续更新，未完待续连载中....

混合云超融合服务器 html居中css 年终总结网络总结方法总结

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

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

前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

Hydrogen 2019-08-05 12:48 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
CSS居中方法总结

摘要：此时检查元素即可即可实现内层的实现了居中这种方式是最为我们熟知的，其缺点是需要设置子元素的宽度。交叉轴居中当设置了属性时，主轴的方向会改变。垂直居中实现方案用的属性，以及定位，与上面的水平居中类似，只是改为即可。水平居中实现方案确定宽度的元素水平居中 1.我们可以通过给该元素的父级设置margin: 0 auto的方式来实现。HTML: ...

ralap 2019-08-30 13:07 评论0 收藏0
CSS水平垂直居中总结

摘要：垂直居中表格布局法为什么就能垂直居中拜读了张鑫旭大神的文章行高指的是什么行高指的是文本行的基线间的距离。行内框具有垂直居中性。 CSS水平居中、垂直居中、水平垂直居中方法总结文字的水平居中: text-align:center; 单行文字的垂直居中： line-height:30px; height:30px; 让有宽度的div水平居中： margin: 0 auto; width:...

mist14 2019-08-30 13:13 评论0 收藏0
对css居中的一点总结

摘要：为了更好的加深对居中的理解，搜集和阅读相关资料，发现不错的文章将其整理出来。在学习前端的过程中，发现元素和文本的水平居中和垂直居中，是经常会出现的问题，在实际工作中也会经常碰到。居中的技巧有很多，但在编写代码的过程中，发现有时候技巧管用，有时候不管用，于是就将每个知道的方案都试一遍，找到合适的。这种情况究其原因是对居中的认识不够深入，只是停留在实现需求的水平上。为了更好的加深对居中的...

BenCHou 2019-08-29 11:17 评论0 收藏0