文档章节

[分享] 纯CSS完美实现垂直水平居中的6种方式

没错就是酱紫
 没错就是酱紫
发布于 2016/07/29 10:40
字数 1272
阅读 29
收藏 3
点赞 0
评论 0

前言

由于HTML语言的定位问题,在网页中实现居中也不是如word中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的。网上讲居中的文章很多,但是都不太完整,所以小茄今天就来总结下纯CSS实现居中的各种方案。学疏才浅,文中如有不当之处,万望指出!

6种方案

1、绝对定位+margin:auto

<style type="text/css">
    .wrp {
        background-color: #b9b9b9;
        width: 240px;
        height: 160px;
    }
    .box {
        color: white;
        background-color: #3e8e41;
        width: 200px;
        height: 120px;
        overflow: auto;
    }
    .wrp1 { position: relative; }
    .box1 {
        margin: auto;
        position: absolute;
        left: 0; right: 0; top: 0; bottom: 0;
    }
</style>
<div class="wrp wrp1">
    <div class="box box1">
        <h3>完全居中层1:</h3>
        <h3>开发工具 【 WeX5 】: 高性能轻架构、开源免费、跨端、可视化</h3>
    </div>
</div>

效果: 

实现原理:利用css定位规则,设置左右、上下方向定位为0,margin为auto,让css根据定位计算margin值,用hack的方式实现居中。居中块(绿色)的尺
寸需要可控,因为css计算margin时也需要参考尺寸值,由于四周为0,所以自动计算的尺寸是与父容器一样的。无论是设置width、height或者是 max-
height、max-width,都是让尺寸不会扩大到与父级一样。

2、绝对定位+margin反向偏移

</style>
<style type="text/css">
    .wrp2 { position: relative; }
    .box2 {
        position: absolute;
        top: 50%; left: 50%;
        margin-left: -100px; /* (width + padding)/2 */
        margin-top: -75px; /* (height + padding)/2 */
    }
</style>
<div class="wrp wrp2">
    <div class="box box2">
        <h3>完全居中方案二:</h3>
        <h3>开发工具 【 WeX5 】: 高性能轻架构、开源免费、跨端、可视化</h3>
    </div>
</div>

效果: 

实现原理:由于top、left偏移了父对象的50%高度宽度,所以需要利用margin反向偏移居中块的50%宽高。而margin中不能使用百分比,因为百分比是针对
父对象的,所以需要手动计算定值指定margin值。这个方案需要固定尺寸值,以此来计算margin反向偏向值,所以方案2比方案1稍差!

3、绝对定位+transform反向偏移

<style type="text/css">
    .wrp3 { position: relative; }
    .box3 {
        margin: auto;
        position: absolute;
        top: 50%; left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
</style>
<div class="wrp wrp3">
    <div class="box box3">
        <h3>完全居中方案三:</h3>
        <h3>开发工具 【 WeX5 】: 高性能轻架构、开源免费、跨端、可视化</h3>
</div>

效果: 

实现原理:方案3与方案2原理一样!不同点是使用了transform来代替margin做反向偏移,由于transform的计算基准是元素本身,所以这里可以用50%来做
反向偏移。这个方案也需要固定尺寸值,浏览器以此为基准来计算定位!

4、display:tabel

<style type="text/css">
    .wrp4 { display: table; }
    .subwrp4 {
        display: table-cell;
        vertical-align: middle;
    }
    .box4 {
        margin: auto;
        overflow-wrap: break-word;
        height: auto;
        max-height: 80%;
        max-width: 80%;
    }
</style>
<div class="wrp wrp4">
    <div class="subwrp4">
        <div class="box box4">
            <h3>完全居中方案四:</h3>
        </div>
    </div>
</div>

效果: 

实现原理:方案4是实现效果比较好的,居中块的尺寸可以做包裹性,缺点是增加了一层table-cell层来实现垂直居中。方案4的居中块可以设置 max-
height、max-width,而且居中块是可以具有垂直方向的包裹性的。水平方向由于是在table-cell里面的,所以会直接显示max-width,也就是宽度趋大。

5、display: inline-block

<style type="text/css">
    .wrp5 {
        text-align: center;
        overflow: auto;
    }
    .box5 {
        display: inline-block;
        vertical-align: middle;
        width: auto;
        height: auto;
        max-width: 90%;
        max-height: 90%;
    }
    .wrp5:after {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        margin-left: -0.25em;
        /* To offset spacing. May vary by font */
    }
</style>
<div class="wrp wrp5">
    <div class="box box5">
        <h3>完全居中方案五:</h3>
        <h3>开发工具 【 WeX5 】: 高性能轻架构、开源免费、跨端、可视化</h3>
    </div>
</div>

效果:

实现原理:原理:利用inline-block的vertical-align: middle去对齐after伪元素,after伪元素的高度与父对象一样,就实现了高度方向的对齐。方案5
实现效果更加好,居中块的尺寸可以做包裹性、自适应内容,兼容性也相当好。缺点是水平居中需要考虑inline-block间隔中的留白(代码换行符遗留问
题。)。方案4的居中块可以设置 max-height、max-width,而且居中块是可以具有水平垂直两个方向的自适应。

6、display: flex-box

<style type="text/css">
    .wrp6 {
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

    .box6 {
        width: auto;
        height: auto;
        max-width: 90%;
        max-height: 90%;
    }
</style>
<div class="wrp wrp6">
    <div class="box box6">
        <h3>完全居中方案六:</h3>
        <h3>开发工具 【 WeX5 】: 高性能轻架构、开源免费、跨端、可视化</h3>
    </div>
</div>

效果: 

实现原理: flexbox布局。此乃布局终极大法,专治各种布局定位难题!优点:能解决各种排列布局问题,实现方式符合人类认知。缺点:PC端某些旧浏
览器支持度不高。

纯CSS实现居中的各种方案就总结到这里了,码字不易,顺手点赞哈!

© 著作权归作者所有

共有 人打赏支持
没错就是酱紫
粉丝 6
博文 16
码字总数 33938
作品 0
东城
程序员
前端秘籍,看程序员如何用九个招式,搞定css水平居中

CSS水平居中 text-align:center是前端工程师的基本功,我在项目中经常遇到CSS水平居中的需求,这篇教程将我以往用过的9种CSS实现水平居中的方法总结出来,也方便日后再用到时回顾。 工具/原料...

ToEnd ⋅ 05/11 ⋅ 0

DIV垂直居中的各种方法

在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”,其实水平居中实现还是比较简单的,反而垂直居中有点麻烦,因为我们设计页面的时候往往水平宽度都是固定的。因此我...

alexian ⋅ 2010/10/28 ⋅ 0

一道CSS笔试题

如上图所示,屏幕正中间有个元素A,随着屏幕宽度的增加,始终需要满足以下条件: A元素垂直居中于屏幕中央; A元素距离屏幕左右边距各20px; A元素里面的文字“A”水平垂直居中; A元素的高度...

marginyu ⋅ 2017/10/23 ⋅ 0

[译文]CSS的水平/垂直居中:一篇完整的指南

原文:Centering in CSS: A Complete Guide 在CSS中居中是(开发者)抱怨CSS设计的代表问题之一。有人嘲笑说:这有什么困难的呢?我认为,难度不在于解决问题,而在于有如此多的不同解决方法...

huangpin815 ⋅ 2017/09/26 ⋅ 0

16种方法实现水平居中垂直居中

熟悉水平居中和垂直居中的方法, 不为别的, 就为用的时候能够信手拈来. 下面直接步入正题. 水平居中 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中. 若是块级元素...

tomzhangto ⋅ 2017/12/19 ⋅ 0

如何让DIV水平和垂直居中

我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中,我将给大家讲述如何用...

ForingY ⋅ 2016/06/26 ⋅ 0

元素居中的N种方式

水平居中 <1>行内元素的居中 被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。 <2>块状元素的居中 当被设置元素为 块状元素 时用 text-align...

_YM雨蒙 ⋅ 2017/08/16 ⋅ 0

一些CSS方面的知识

1.学习CSS"盒子模型"(上):http://www.108js.com/article/article8/80058.html?id=1766 2.学习CSS"盒子模型"(下):http://www.108js.com/article/article8/80059.html?id=1767 3.css知多......

IT追寻者 ⋅ 2016/06/23 ⋅ 0

分享简单而实用的网页菜单导航【提供源码】

菜单导航对于一个网站来说非常重要,对于浏览者来说,导航设计的好坏将直接影响用户的体验。这里,我们为网页开发者提供了一系列简单但是实用的导航菜单例子及其源码,仅供参考和学习。 CSS3...

tp_wire ⋅ 2012/06/14 ⋅ 1

css 实现单行文本 多行文本垂直居中

在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是...

LorinLuo ⋅ 2015/11/26 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

ARMS: 原来实时计算可以这么简单!

摘要: 业务实时监控服务( ARMS)是一款阿里云应用性能管理(APM)类监控产品。借助本产品,您可以基于前端、应用、业务自定义等服务,迅速便捷地为企业构建秒级响应的业务监控能力。 业务实...

阿里云云栖社区 ⋅ 4分钟前 ⋅ 0

Monkey入门_琉璃

先下载android sdk安装配置好路径,然后adb shell 如果给你显示这个,说明目前没有有效的移动设备链接,可以开个安卓模拟器或者使用真机,usb或wifi链接到电脑都可以,打开usb调试模式;然后...

EvanDev ⋅ 5分钟前 ⋅ 0

Idea类注释模板

一、设置类注释模板 1.选择File–>Settings–>Editor–>File and Code Templates–>Includes–>File Header. 2.设置完成后,创建类时自动生成注释,效果如下。...

Clarence_D ⋅ 7分钟前 ⋅ 0

vuejs题

1、active-class是哪个组件的属性?嵌套路由怎么定义? 答:vue-router模块的router-link组件。 2、怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 答:在router目录下的index.j...

自由小鸟 ⋅ 7分钟前 ⋅ 0

2018年社交系统ThinkSNS年中大促

致各大商企事业单位及粉丝用户: 为感谢大家对ThinkSNS品牌的关注与支持,2018年6月18日官方诚推出:年中大促,限时抢购活动! “ThinkSNS 年中大促,¥6.18超值特惠 名额有限,预购从速! ...

ThinkSNS账号 ⋅ 13分钟前 ⋅ 0

MYSQL主从复制搭建及切换操作(GTID与传统)

如下: MYSQL主从复制方式有默认的复制方式异步复制,5.5版本之后半同步复制,5.6版本之后新增GTID复制,包括5.7版本的多源复制。 MYSQL版本:5.7.20 操作系统版本:linux 6.7 64bit 1、异步...

rootliu ⋅ 13分钟前 ⋅ 0

Java强软弱虚引用Reference

Java强软弱虚引用Reference 本文目的:深入理解Reference 本文定位:学习笔记 学习过程记录,加深理解,提升文字组合表达能力。也希望能给学习Reference的同学一些灵感 源码说明 源码基于jdk...

lichuangnk ⋅ 16分钟前 ⋅ 0

plsql 表中字段及注释时为乱码

在windows中创 建一个名为“NLS_LANG”的系统环境变量,设置其值为“SIMPLIFIED CHINESE_CHINA.ZHS16GBK”, 然后重新启动 pl/sql developer,这样检索出来的中文内容就不会是乱码了。如...

江戸川 ⋅ 19分钟前 ⋅ 0

Docker创建JIRA 7.2.7中文破解版

1、介绍 1.1、什么是JIRA?   关于JIRA网上的介绍有很多,以下摘自百度百科:   JIRA是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪、客户服务、需求收集、流程审批、任...

谢思华 ⋅ 23分钟前 ⋅ 0

Java Class 类使用

Java Class 类使用 我们可以通过已知的包名来获取到 Class 对象,从而可以通过反射动态的来操作对象。 获取Class有三种方式 //通过对象.class直接获取Class integerClass = Integer.class;...

gaob2001 ⋅ 27分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部