经典CSS坑：如何完美实现垂直水平居中？

踩了各种坑之后总结出的方法，开门见山，直接上代码和效果图。希望对读者有所帮助，后续如果有更好的方法，我也会持续更新

  1. 第一种方法：transform（个人认为最完美的居中定位方法）推荐度：❤❤❤❤❤



2.

第二种方法：flex（响应式布局的最好方法）推荐度：❤❤❤❤❤



3.

第三种方法：定位+自适应margin方法 推荐度：❤❤❤❤



4.

第四种方法：text-align + transform（可以实现效果，但是text-align不符合语义化）推荐程度：❤❤❤



5.

第五种方法：text-align（本质上只是文字居中显示）推荐程度：❤❤



6.

第六种方法：margin（需要设置width，不能自适应）推荐程度：❤❤



7.

第七种方法：vertical-align（本质上是表格元素垂直方向居中显示）推荐程度：❤❤



8.

第八种方法：line-height（行高）推荐程度：❤

经典CSS坑：如何完美实现垂直水平居中？的更多相关文章

  1. 关于用css实现文本和图片垂直水平居中

    关于用css实现文本和图片垂直水平居中   一直相信好记性不如烂笔头,最近遇到很多用到垂直居中的,整理一下以便日后查阅. 一.文本垂直水平居中 1.水平居中: 文字水平居中没什么好说的,用text-a ...

  2. 纯CSS完美实现垂直水平居中的6种方式

    前言 由于HTML语言的定位问题,在网页中实现居中也不是如word中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的.网上讲居中的文章很多,但是都不太完整,所 ...

  3. CSS常见的5种垂直水平居中（面试够用）

    方法一 (flex) <div id='box'> <div class='child'></div> </div> #box{ width:200px ...

  4. 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局，CSS3+SASS完美版)

    实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...

  5. CSS垂直水平居中方法总结

    在布局的时候经常能用到居中,在此总结一下 html结构: <div class="wrap"> <div class="content"> ...

  6. css实现div不定宽高垂直水平居中解决方案

    在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...

  7. div+css实现未知宽高元素垂直水平居中

    div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...

  8. css实现垂直水平居中的5种方法

    css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...

  9. 【css】图片垂直水平居中

    一.已知宽高的图片实现垂直水平居中 1.借助margin-top负边距实现垂直居中 <!DOCTYPE html> <html> <head> <meta c ...

随机推荐

  1. Life in Changsha 第二次scrum冲刺

    第二次冲刺   第二次冲刺任务 设计留言板功能. 用户故事 用户打开“生活在长大”的界面 程序首页展示校园服务,论坛等相关信息 用户选择留言板 程序界面跳转 用户查看留言,并可以输入留言内容 提交后留 ...

  2. Fiddler中如何过滤会话、查询会话、保存回话、对比会话

    1.Fiddler中如何过滤会话 在抓包时,会捕捉到很多的会话,但是我们只关心特定的接口会话,这个时候我们可以使用过滤功能,来帮助我们从一大堆会话中筛选去我们关心的会话 (1)勾选过滤器选项Filte ...

  3. [Spark内核] 第31课：Spark资源调度分配内幕天机彻底解密：Driver在Cluster模式下的启动、两种不同的资源调度方式源码彻底解析、资源调度内幕总结

    本課主題 Master 资源调度的源码鉴赏 [引言部份:你希望读者看完这篇博客后有那些启发.学到什么样的知识点] 更新中...... 资源调度管理 任务调度与资源是通过 DAGScheduler.Ta ...

  4. mysql分组查询前n条数据

    建表: CREATE TABLE hard(id INT,aa varchar(50) ,bb INT,PRIMARY key(id))insert into hard values(1,'a',9) ...

  5. Factom(公证通)--基于区块链的存证系统

    Factom这个Solution在2014年的时候就已经推出了,现在已经2018年了,我才来写这一篇分析文章可能有些迟了,但是它是十分具有参考价值的.因为现阶段来开区块链虽然炒得火热--养猫.养狗.草 ...

  6. 模拟uClinux系统调用

    这篇文章原来放在CU上的,现在挪过来了.CU上设置不可见了. 1.  目标 这里主要是实验一下uclinux的系统调用. 2.   环境 OS                :vmware + red ...

  7. .NET Core单文件发布静态编译AOT CoreRT

    .NET Core单文件发布静态编译AOT CoreRT,将.NET Core应用打包成一个可执行文件并包含运行时. 支持Windows, MacOS and Linux x64 w/ RyuJIT ...

  8. 移动端js调取手机相册和拍照功能

    前端可以通过js调取手机的相册和拍照功能,但不能拍视频!!! <!DOCTYPE html> <html lang="en"> <head> & ...

  9. 基于PDO的简易ORM

    #基于PRO的一个简单地ORM GitHub 项目地址 #在用原生写脚本的时候怀念起框架中封装好的ORM,所以仿照laravel写了这个简洁版的ORM,可以链式操作. #实现功能 ###条件函数 ta ...

  10. 微信公众号问题：{"errcode":40125,"errmsg":"invalid appsecret, view more at http:\/\/t.cn\/LOEdzVq, hints: [ req_id: kL8J90219sg58 ]"}

    在调试微信公众号授权登录时遇到了这个错误,着实是心烦了半天,公众号相关开发以前是经常做的,很久没有接触了,而且遇到了这么个以前没遇到的问题. {"errcode":40125,&q ...