经典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. golang 最和谐的子序列

    We define a harmonious array is an array where the difference between its maximum value and its mini ...

  2. SEO的基本概念 和 提交SITEMAP到搜索引擎

    SEO的基本概念 SEO的基本概念 :我们接触的SEO主要就是做搜索引擎的优化,让搜索引擎更好地收录 我们的网站,不管是首页还是内页,都能有很好的收录和排名.那么我们经常用到的SEO的语句是什么呢?小 ...

  3. 深入剖析MSAA

    本文打算对MSAA(Multisample anti aliasing)做一个深入的讲解,包括基本的原理.以及不同平台上的实现对比(主要是PC与Mobile).为了对MSAA有个更好的理解,所以写下了 ...

  4. flex盒模型实现头部尾部固定

    近期做移动app.wap等站,需要头部固定在顶部,不随着内容滚动而滚动平时第一想法就是使用position:fixed;top:0;z-index:10;这样去实现但这样使用fixed之后,会在ios ...

  5. Python爬虫知识点一

    一.入门知识: 1.1.HTTP简介HTTP = HyperText Transfer ProtocolURI = Uniform Resource IdentifierURL = Uniform R ...

  6. Android Studio 查看手机CPU信息

    在Android开发中,我们想要获取手机是什么CPU架构,可以通过下面方式: 1.进入adb 终端 adb shell 2.进入proc目录 cd /proc/ 3.查看cpu信息 cat cpuin ...

  7. C#高级编程学习一-----------------第五章泛型

    三层架构之泛型应用 概述 1.命名约定 泛型类型以T开头或就是T. 2.泛型类 2.1.创建泛型类

  8. OpenCV探索之路（二）：图像处理的基础知识点串烧

    opencv图像初始化操作 #include<opencv2\opencv.hpp> #include<opencv2\highgui\highgui.hpp> using n ...

  9. ionic 横向滚动 ion-scroll 进度条（步骤）// 根据后台数据控制当前默认滑动到的位置

    <ion-scroll zooming="false" direction="x" style="width: 100%;" scro ...

  10. Springboot(二):Spring Boot 之 HelloWorld

    关于项目的创建不再解释,需要了解的请参考: Springboot(一):使用Intellij中的Spring Initializr来快速构建Spring Boot工程 目录结构: 首先我们在上一项目的 ...