经典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. jQuery实现表的编辑删除添加(增删改查)🌚

    代码 : (用到了bootstrap里面的全局css样式和组件,毕竟一把梭.

  2. @EnableAsync annotation metadata was not injected

    [问题描述] @EnableAsync annotation metadata was not injected spring配置初始化时候报错 nested exception is java.la ...

  3. Mac 下 android／iOS https抓包

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

  4. 概率分布之间的距离度量以及python实现(四)

    1.f 散度(f-divergence) KL-divergence 的坏处在于它是无界的.事实上KL-divergence 属于更广泛的 f-divergence 中的一种. 如果P和Q被定义成空间 ...

  5. java 重定向和转发的区别

    注:原创链接  http://www.cnblogs.com/shenliang123/archive/2011/10/27/2226892.html response.sendredirect(&q ...

  6. CentOS7卸载自带jdk安装自己的JDK1.8

    1.查看centos自带的jdk rpm -qa | grep Java 2.删除自带的jdk 例如:rpm -e --nodeps java-1.8.0-openjdk-1.8.0.102-4.b1 ...

  7. vivi虚拟摄像头驱动程序

    一.vivi虚拟摄像头驱动 基于V4L2(video for linux 2)摄像头驱动程序,我们减去不需要的ioctl_fops的函数,只增加ioctl函数增加的必要的摄像头流查询等函数: #inc ...

  8. dos命令的小总结

    DOS命令与批处理:目的:简单高效.为我们以后学习linux操作系统做准备进行DOS命令窗口: 运行---输入cmd主要包括目录操作类命令.磁盘操作类命令.文件操作类命令和其它命令 1.在d盘创建一个 ...

  9. python通过getopt模块获取执行命令参数

    python脚本和shell脚本一样可以获取命令行的参数,根据不同的参数,执行不同的逻辑处理. 通常我们可以通过getopt模块获得不同的执行命令和参数. 下面我通过新建一个test.py的脚本解释下 ...

  10. RHM-M10汽车吊力矩限制器/载荷指示器

    一 产品特点 1.     采用7.0寸工业65K色TFT LCD真彩屏,亮度250nit,分辨率800×480: 2.     传感器采用进口机芯,过载能力强: 3.     采用油压取力和大臂弯曲 ...