经典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. day 10 字符编码和文件处理 细节整理

    pycharm是文本编辑器. 大概理解为:  输出到屏幕上的时候,是解码过的字符串,用 decode 处理的时候要编码成相应的流, encode 成你要用的格式就可以了 1 .字符编码: 字符==== ...

  2. ASP.NET Core学习之二 菜鸟踩坑

    对于像我这样没接触过core的人,坑还是比较多的,一些基础配置和以前差别很大,这里做下记录 一.Startup 1.注册服务 // This method gets called by the run ...

  3. jQuery的get()post()getJson()方法

    jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据. HTTP 请求:GET vs. POST 两种在客户端和服务器端进行请求-响应的常用方 ...

  4. Python中将函数作为另一个函数的参数传入并调用

    在Python中,函数本身也是对象,所以可以将函数作为参数传入另一函数并进行调用 在旧版本中,可以使用apply(function, *args, **kwargs)进行调用,但是在新版本中已经移除, ...

  5. SSM中（Spring-SpringMVC-Mybatis）（二：整合）

    使用Maven整合一个SSM,当然要配有Maven环境,Maven的环境配置自行百度,挺好配的 创建一个Maven项目以后,目录结构如图所示: 然后就是各部分配置: 首先pom导入依赖jar包: &l ...

  6. Android Ptrace Inject

    之前介绍了Android平台上3种常见的hook方法,而hook的前提是进程注入,通过进程注入我们可以将模块或代码注入到目标进程中以便对其空间内的数据进行操作,本篇文章介绍基于ptrace函数的注入技 ...

  7. Maven构建项目比较慢的解决办法

    [前言] Intellij IDEA下Maven构建项目时,构建项目速度比较慢.需要等好久才能构建好一个项目,有时候一下午也还在提示进度. [问题描述] 使用Maven构建项目时: 设置好各种参数,然 ...

  8. Java学习笔记18---final关键字修饰变量、方法及类

    英语里final这个单词大家都知道是"最终的"意思,其实还有一个意思是"不可更改的".在Java里,final关键字作"不可更改的"来解释更 ...

  9. Mac 下 android／iOS https抓包

    一.Charles简介 Charles,是用Java开发的,所以跨平台,不仅可以在Mac上使用,Linux以及Window下都是可以使用的,当然需要安装JDK,才能运行,但目前是收费的. 二.下载 官 ...

  10. Maven代理设置

    公司需要设置代理才能上网,而运行Maven时需要下载依赖的库. 怎么办呢? 原来Maven也像IE一样,可以设置HTTP代理的. 步骤如下: ·编辑 ~/.m2/setting.xml 文件.如果该目 ...