纯CSS完美实现垂直水平居中的6种方式
前言
由于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 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种方式的更多相关文章
- 纯CSS实现元素垂直水平居中-非固定宽度
这里不讨论行内元素的居中!! 盒子垂直居中+水平居中的需求时经常遇到的,看到的较多实现逻辑是固定content-box的宽度,通过让margin-left和margin-top等于宽或高的负一半来实现 ...
- 关于css垂直水平居中的几种方式
css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简单,加上line-height: ...
- 用纯css实现下拉菜单的几种方式
第一种:display:none和display:block切换 <!DOCTYPE html> <html lang="en"> <head> ...
- 经典CSS坑:如何完美实现垂直水平居中?
经典CSS坑:如何完美实现垂直水平居中? 踩了各种坑之后总结出的方法,开门见山,直接上代码和效果图.希望对读者有所帮助,后续如果有更好的方法,我也会持续更新 第一种方法:transform(个人认为最 ...
- css实现垂直水平居中的5种方法
css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...
- 一款纯css实现的垂直时间线效果
今天给大家分享一款纯css实现的垂直时间线效果.垂直时间线适合放在类似任务时间安排的网页上.该实现采用了蓝色作为主题色,界面效果还不错.一起看下效果图: 实现的代码. html代码: ... 阅读原文 ...
- 你知道CSS实现水平垂直居中的第10种方式吗?
你知道CSS实现水平垂直居中的第10种方式吗? 仅居中元素定宽高适用: absolute + 负 margin absolute + margin auto absolute + calc 居中元素不 ...
- 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)
实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...
- 【css】图片垂直水平居中
一.已知宽高的图片实现垂直水平居中 1.借助margin-top负边距实现垂直居中 <!DOCTYPE html> <html> <head> <meta c ...
随机推荐
- ValueError: Attempted relative import in non-package
执行:python deom/scripts/populate.py ValueError: Attempted relative import in non-package solve:python ...
- struts2 标签库 介绍
struts2.0里的标签没有分类,只用在jsp头文件加上<%@ taglib prefix="s" uri="/struts-tags" %>就能 ...
- struts2 标签的使用之一 s:if
struts2 的web 项目中为了方便的编写jsp,标签是最好的选择 1:struts2 标签库的定义在**-core-版本号.jar META-INF 路径下找到struts-tags.tld文件 ...
- Codeforces Round #243 (Div. 2) A~C
题目链接 A. Sereja and Mugs time limit per test:1 secondmemory limit per test:256 megabytesinput:standar ...
- HDU1465+递推
经典的信封装信问题 f[ n ] = ( n-1 ) * ( f[ n-1 ]+f[ n-2 ] ) #include<stdio.h> #include<string.h> ...
- jquery的ajax和原始的ajax这两种方式的使用方法
jquery的ajax是对原始的ajax进行的封装,方便用户的使用.下面用代码分别举例各自的使用方式. jquery的ajax发送和接收xml数据格式. $.ajax({ type: "PU ...
- 使用session技术来实现网上商城购物车的功能
首先.简单的了解session和cookie的区别: 一.session和cookie的区别: session是把用户的首写到用户独占的session中(服务器端) cookie是把用户的数据写给用户 ...
- Java 关于中文乱码处理的经验总结【转载】
为什么说乱码是中国程序员无法避免的话题呢?这个首先要从编码机制上说起,大家都是中文和英文的编码格式不是一样,解码也是不一样的!如果中国的程序员不会遇到乱码,那么只有使用汉语编程.汉语编程是怎么回事我也 ...
- ubuntu查看命令
以非root用户更新系统 sudo: sudo是linux系统管理指令,是允许系统管理员让普通用户执行一些或者全部的root命令的一个工具,如halt,reboot,su等等.这样不仅减少了root用 ...
- 2013 ACM/ICPC Asia Regional Changsha Online - E
第一个被板刷的题 取余 依次算在周几 #include <iostream> #include<cstdio> #include<cstring> #include ...