跬步-CSS 实现居中

2019-01-14 admin

CSS 实现居中,无论在实际开发和面试都是常见的内容。

本文总结了实现居中常见的几种方式,包含宽度已知/未知及兼容性的要求。

.pn {
    width: 500px;
    height: 500px;
    border: 1px solid #000;
}

.box {
    background-color: #eee;
}

.size {
    width: 100px;
    height: 100px;
}
<body>
    <div class="pn">
        <div class="box size">啦啦啦</div>
    </div>
</body>

这一段是公共内容,pn 类是父容器,box 类代表需要居中的元素,size 类控制是否定义高度。

line-height

利用行内元素高度和行高相同的居中效果,此方法常用于单行文本的垂直居中效果。

.pn {
    line-height: 500px;
    text-align: center;
    font-size: 0;
}

.box {
    font-size: 14px;
    display: inline-block;
    line-height: initial;
    text-align: left;
}

absolute margin 负值

父元素设置为定位元素,子元素的绝对定位是基于父元素的宽高,这个效果可以达到居中的目的。

由于定位的基点是基于子元素的左上角,需要根据元素自身的尺寸做对应的偏移纠正。

此方法是最常用的居中方式,兼容效果好,需要已知子元素的高度。

.pn {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left:50%;
    margin-top: -50px;
    margin-left: -50px;
}

absolute auto

该方法同样是基于定位实现,先将子元素的定位都设置为 0,再将 margin 设置为 auto 就可以实现居中。

兼容效果好,需要已知子元素的高度。

.pn {
    position: relative;
}
.box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

absolute calc

该方法同样是基于定位实现,利用 calc 特性直接计算定位的偏移位置。

需要兼容 css3 的 calc 特性,已知子元素的高度。

.pn {
    position: relative;
}
.box {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

absolute transform

该方法同样是基于定位实现,利用 transform 偏移自身的位置实现居中。

需要兼容 css3 的 transform 特性,不需要已知高度。

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

table

利用 table 元素天然垂直居中的特性实现居中效果。

使用 table 做布局背离了语义化的初衷,也会产生很多冗余的代码,不建议使用。

.pn{
    text-align: center;
}
.box{
    display: inline-block;
}

<table>
    <tbody>
        <tr>
            <td class="pn">
                <div class="box">啦啦啦</div>
            </td>
        </tr>
    </tbody>
</table>

css-table

利用 css 的 table 属性,可以让普通元素拥有 table 元素的特性和效果。

原理和 table 一样,兼容效果好,不需要已知高度。

.pn {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.box {
    display: inline-block;
}

flex

flex 是 css3 中最新布局方式,可以很方便实现各种布局效果。

利用 flex 的 justify-content 和 align-items 特性实现居中效果。

该方法实现简单,但是需要兼容 flex 特性。

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

grid

grid 是最新的布局方式,利用 justify-self 和 align-self 可以快速实现居中效果。

grid 现在的兼容性不太好,使用时要注意。

.pn{
    display: grid;
}
.box{
    justify-self: center;
    align-self: center;
}

总结

居中效果可由多种方式实现,各实现方式有其特点和兼容特性

设备 高度 版本 推荐
PC 未知 IE8- css-table
PC 已知 IE8- absolute margin 负值
PC 未知 IE8+ absolute transform
PC 已知 IE8+ absolute transform
移动 * * absolute transform

原文链接:https://segmentfault.com/a/1190000017883495

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-50963.html

文章标题: 跬步-CSS 实现居中

相关文章
CSS2.0帮助文档(参考手册)chm下载
下载地址:CSS2.0帮助文档(参考手册)chm下载 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
js实现手机拍照上传功能
在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: &lt;form id=&quot;form&quot; method=&quot;post&quot; action=&quot;http:&#x2...
2017-03-06
纯JS实现旋转图片3D展示效果
CSS: &lt;style type=&quot;text&#x2F;css&quot;&gt; #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
如何编写干净高效的CSS代码
其实CSS的学习并不困难,但在一些较为大型的项目中就显得杂乱无章,变得很难管理,尤其是不同的人编写CSS的风格总会略有不同,从团队合作的层面上来说,就更加难以沟通,所以,我们为此总结了一些如何实现高效整洁的CSS代码原则: 使用Reset但...
2015-11-12
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
js实现鼠标左右移动,图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。 思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative;图...
2017-02-17
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
js实现文字向上轮播功能
话不多说,请看实现代码: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt;...
2017-03-10
回到顶部