经典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. 初识CSS3

    1.CSS规则由两部分构成,即选择器和声明器  声明必须放在{}中并且声明可以是一条或者多条  每条声明由一个属性和值构成,属性和值用冒号分开,每条语句用英文冒号分开 注意:   css的最后一条声明 ...

  2. [Android游戏开发]八款开源 Android 游戏引擎 (巨好的资源)

    初学Android游戏开发的朋友,往往会显得有些无所适从,他们常常不知道该从何处入手,每当遇到自己无法解决的难题时,又往往会一边羡慕于 iPhone下有诸如Cocos2d-iphone之类的免费游戏引 ...

  3. 02-JAVA基础及面向对象（补充）

    引用数据类型 java中的数据类型可以分为 基本数据类型 和 引用数据类型 两大类 int float char boolean等都是基本数据类型 类类型都是引用数据类型 引用数据类型类似C语言中的指 ...

  4. Head First设计模式之享元模式（蝇量模式）

    一.定义 享元模式(Flyweight Pattern)主要用于减少创建对象的数量,以减少内存占用和提高性能.这种类型的设计模式属于结构型模式,它提供了减少对象数量从而改善应用所需的对象结构的方式. ...

  5. 【Bootstrap简单用法】

    一.下载及使用 参考网站:http://www.bootcss.com/ 1.使用 BootCDN 提供的免费 CDN 加速服务(同时支持 http 和 https 协议) <!-- 最新版本的 ...

  6. 微信小程序<web-view>嵌入网页后，小程序如何和网页交互传值？

    最近开发一个项目由于小程序某些组件的限制,然后想到嵌入网页,但是遇到一个问题:网页端调取数据的时候需要 小程序传递多个参数值才能用,如何传值呢? 最初我想到是<web-view src=&quo ...

  7. poi 读取word文档

    1.导入jar包 官网下载地址: https://www.apache.org/dyn/closer.lua/poi/release/bin/poi-bin-3.17-20170915.zip 最开始 ...

  8. Python进阶内容（四）--- 迭代器(Iterator)与生成器(Generator)

    迭代器 我们已经知道,可以直接作用于for循环的数据类型有以下几种: 一类是集合数据类型,如list.tuple.dict.set.str等: 一类是generator,包括生成器和带yield的ge ...

  9. [笔记]Linux命令行大全

    date 显示当前时间和日期 cal 显示当前月份的日历 df 查看磁盘剩余空间的数量 free 显示空闲内存的数量 pwd 打印当前工作目录 cd 切换目录 ls 列出文件夹内容 绝对路径:开始于根 ...

  10. jsp+struts2登录框架模板

    一.建立一个名叫jsp_struts2的项目 二.导入jar包 如上图:jar包导入在WebContent/WEB-INF/lib下 三.建立一个LoginAction类 LoginAction类的s ...