CSS居中完整版

TIGERB 发布于2019-08-30 12:55 / 1432人阅读

摘要：块级元素对于块级元素，可以通过设置他的属性为来达到居中的效果。与其它情况不同，这个是用来处理一行内的元素居中的。在包含块里放置一个高度为的伪元素，这样，文本就居中了。

翻译自https://css-tricks.com/centering-css-com...

我将原作者的代码整理成了Github Repo，并且在持续更新使用CSS居中的方法，欢迎fork和star我的项目css-center-complete。

大家总是会抱怨如何在CSS中居中一个元素。为什么会这么难呢？呵呵(使用这个来词翻译再好不过了)。我认为问题不在有多难，而是居中在不同的场景中有那么多种方式，很难抉择到底该使用哪一种。

所以，我们把这些选择做成一棵树状，希望使用起来更简单吧。

横向居中 是行内元素或者行内块级元素？(inline 或者 inline-block)

你可以将行内元素居中在块级元素中，就像这样：

.center-children {
    text-align: center;
}

代码链接

这个方法对于display属性为inline, inline-block, inline-table, inline-flex等的元素都有作用。

块级元素？

对于块级元素，可以通过设置他的margin属性为auto来达到居中的效果。前提是要设置一个宽度。如果不设置宽度的话，默认为100%，就用不着居中了。就像这样：

.center-me {
    margin: 0 auto;
}

代码链接

多个块级元素？

如果需要在一行中居中两个及以上的块级元素，最好给他们设置display属性为inline-block。下面这个例子是在flexbox中给他们设置display: inline-block;的：

代码链接

除非你是想多个块级元素都在各自的顶部，如果是这样的话，那么使用amrgin: 0 auto；也可以；

代码链接

垂直居中 行内元素或者行内块级元素？(inline 或者 inline-block)

多带带一行

有的时候行内元素很明显可以垂直居中。只需要设置它们的上下padding值相等：

.link {
    padding-top: 30px;
    padding-bottom: 30px;
}

如果设置padding不行，而且你想居中的是文本的话，那么，可以设置文本的line-height与元素的height相等。

.center-text-trick {
    height: 100px;
    line-height: 100px;
    white-space: nowrap;
}

多行

1、相等的padding对多行的情况也适用。如果不起作用的话，那么这个元素或者文本的display属性可能是table-cell。这种情况下，vertical-align就有作用了。与其它情况不同，这个是用来处理一行内的元素居中的。

代码链接

2、如果类表格元素的居中不起作用，那么是否考虑使用flexbox？在flexbox的父元素中居中flexbox子元素就太简单了。

.flex-center-vertically {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 400px;
}

记住只有父级元素有固定的高度，这样写才有意义。

3、如果前面两种方法都不起作用，可以使用ghost element方法。在包含块里放置一个高度为100%的伪元素，这样，文本就居中了。

.ghost-center {
    position: relative;
}
.ghost-center::before {
    content: " ";
    display: inline-block;
    height: 100%;
    width: 1%;
    vertical-align: middle;
}
.ghost-center p {
    display: inline-block;
    vertical-align: middle;
}

代码链接

块级元素

明确元素的高度

不知道网页布局的高度简直是太习以为常的事情了。各种情况都会出现：

宽度改变，文字重排，高度会改变

不同的文字样式的高度也不一样

不同文本的数量的高度也不一样

固定比例的元素，比如图片啥的，在改变尺寸的时候也会改变高度等等

但是如果你知道元素的高度就好办了：

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px; 
    /* 如果没有使用border-box的话就只需要关心padding和border了 */
}

代码链接

不确定元素的高度

不知道元素高度的情况下，通过先将他往下移动50%，然后再向上移动他的高度的一半来居中也还是有可能的。

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

代码链接

是否考虑flexbox？

别太惊讶，使用flexbox就太简单了

.parent {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

代码链接

横竖都居中

你完全可以用各种方式将上面的技术结合起来达到完美居中的效果。但我觉得可以把这些情况分为下面三种：

元素是否是固定的宽高

在使用绝对定位分别设置上下50％和左右50％之后，使用分别等于宽高一半的负边距就能够跨浏览器实现完全居中了：

.parent {
    position: relative;
}

.child {
    width: 300px;
    height: 100px;
    padding: 20px;

    position: absolute;
    top: 50%;
    left: 50%;

    margin: -70px 0 0 -170px;
}

代码链接

不确定元素的宽高？

如果不知道元素的宽高，那么可以使用transform属性在两个不同的方向上设置-50%(基于当前元素的宽高)来居中：

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

代码链接

flexbox

要在flexbox中居中，需要用到两个居中属性：

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

代码链接

总结

经过上面这些方法，我们完全可以使用CSS来达到完美的居中。

混合云云服务器完整版商业完整版人工智能完整版 java教程完整版

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

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

案例 - 收藏集 - 掘金

摘要：同行这么做使用实现圆形进度条前端掘金在开发微信小程序的时候，遇到圆形进度条的需求。实现也谈数组去重前端掘金的数组去重是一个老生常谈的话题了。百度前端技术学院自定义前端掘金一标签概念元素表示用户界面中项目的标题。闲话图片上传 - 掘金作者：孙辉，美团金融前端团队成员。15年毕业加入美团，相信技术，更相信技术只是大千世界里知识的一种，个人博客: https://sunyuhui.com ...

张金宝 2019-08-20 17:44 评论0 收藏0
案例 - 收藏集 - 掘金

摘要：同行这么做使用实现圆形进度条前端掘金在开发微信小程序的时候，遇到圆形进度条的需求。实现也谈数组去重前端掘金的数组去重是一个老生常谈的话题了。百度前端技术学院自定义前端掘金一标签概念元素表示用户界面中项目的标题。闲话图片上传 - 掘金作者：孙辉，美团金融前端团队成员。15年毕业加入美团，相信技术，更相信技术只是大千世界里知识的一种，个人博客: https://sunyuhui.com ...

huangjinnan 2019-08-29 12:54 评论0 收藏0
前端基础汇总

摘要：及相关问题数据类型函数中指向原型作用域闭包面向对象对象创建模式继承严格模式与对象转换的方法添加属性，根据原型创建区别新特性解构赋值简化对象写法剪头函数三点运算符模板字符串形参默认值异步过程深拷贝与浅拷贝赋值与浅拷贝的区别浅拷贝的几种方法实现 js及es相关问题数据类型函数中this指向——————原型作用域闭包——————面向对象对象创建模式继承——————Es5严格模式Json与j...

2json 2019-08-23 16:58 评论0 收藏0
前端基础汇总

摘要：及相关问题数据类型函数中指向原型作用域闭包面向对象对象创建模式继承严格模式与对象转换的方法添加属性，根据原型创建区别新特性解构赋值简化对象写法剪头函数三点运算符模板字符串形参默认值异步过程深拷贝与浅拷贝赋值与浅拷贝的区别浅拷贝的几种方法实现 js及es相关问题数据类型函数中this指向——————原型作用域闭包——————面向对象对象创建模式继承——————Es5严格模式Json与j...

laznrbfe 2019-08-29 18:38 评论0 收藏0
一些面试时关于 CSS 的问题

摘要：可以试试去掉的会发生很奇妙的事呢附加关于子元素设置为而引发的问题。附加关于开启硬件加速提升网站动画渲染性能问题。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 1. 水平垂直居中问题这可以说是最经典的问题了，水平垂直居中，这个问题从入门前端一直到面试，甚至到工作之后都会时不时遇到，最近的面试也被问过这之类的问题，这里还是好好总结一番，以作备忘。公用 HTML 部分： ...

HackerShell 2019-08-29 13:08 评论0 收藏0