元素居中是HTML和CSS永恒的问题，记录一下我使用的居中方法：

1. 块状元素水平居中，主要用于页面整体布局：

  margin: 0 auto;

2. 文字水平居中，适用于内联元素或inline-block（img默认是inline元素） ：

  text-align:center;

3. 文字垂直居中：

  line-height：与外部div高度相同

4. img与span在同一行对齐并垂直居中，主要用于小图标与文字的对齐：

img和span中都加上vertical-align：middle；

【20190129】CSS-垂直水平居中相关的更多相关文章

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

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

  2. 关于css垂直水平居中的几种方式

    css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简单,加上line-height: ...

  3. css 垂直+水平居中

    垂直+水平居中是一个老生常谈的问题了,现在就固定高度和不固定高度两种情况去讨论 1.父盒子固定高度[定位] 实现1: father-box: position:relative child-box:p ...

  4. css 垂直水平居中总结

    一.前言: 垂直居中有很多方式,我们要做的不是写出完美代码,而是在合适的情况下根据需求选择合适方式. 主要方式: line-height 绝对定位 表格 display:table-cell 主要需求 ...

  5. CSS垂直水平居中方法整理

    CSS定位中常常用到垂直居中,比如覆盖层上的弹框. 兼容性比较好的方法: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transition ...

  6. css垂直水平居中方案

    1. 水平居中 如果是inline元素:在父元素上面设置text-align:center; 如果是block元素:设置宽度和margin:0 auto; 如果是多块级元素:在父元素上面设置text- ...

  7. （转载）css垂直水平居中的整理

    方法一 .demo1 { width:180px; height:180px; line-height:180px; *font-size:160px; border:1px solid #ddd; ...

  8. CSS垂直水平居中

    小小的总结一下:行内元素水平居中用text-align: center;块级元素水平居中用margin-left: auto; margin-right: auto; 首先讨论一下单行时的情况. 毫无 ...

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

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

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

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

随机推荐

  1. powerdesigner 不能自动生成注释的解决方法(三步解决)

    解决power designer 不能自动生成注释的解决办法只需要3步: 一.快捷键 Ctrl+Shift+X 打开脚本编辑器:(快捷键不能执行的话可以从这个路径执行:Tools --> Exc ...

  2. linux系统中的时间

    1.编程显示系统时间: #include <stdio.h> #include <time.h> /* gcc -o fix fixedFormatTime.c ./fix * ...

  3. 原生JS实现下拉刷新

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  4. 深入理解JVM垃圾收集机制，下次面试你准备好了吗

    程序计数器.虚拟机栈和本地方法栈这三个区域属于线程私有的,只存在于线程的生命周期内,线程结束之后也会消失,因此不需要对这三个区域进行垃圾回收.垃圾回收主要是针对 Java 堆和方法区进行. 判断一个对 ...

  5. 【从零开始搭建自己的.NET Core Api框架】（二）搭建项目的整体架构

    系列目录 一.  创建项目并集成swagger 1.1 创建 1.2 完善 二. 搭建项目整体架构 三. 集成轻量级ORM框架——SqlSugar 3.1 搭建环境 3.2 实战篇:利用SqlSuga ...

  6. [Swift]LeetCode166. 分数到小数 | Fraction to Recurring Decimal

    Given two integers representing the numerator and denominator of a fraction, return the fraction in ...

  7. [Swift]LeetCode705. 设计哈希集合 | Design HashSet

    Design a HashSet without using any built-in hash table libraries. To be specific, your design should ...

  8. RedirectToAction()转移方式及参数传递

    今天在做一个功能的时,使用RedirectToAction()需要从这里传几个参数,从网上查了一下,这样解决.真好. Return RedirectToAction("Index" ...

  9. IDEA中MAVEN项目打JAR包的简单方法

      Idea中为一般的非Web项目打Jar包是有自己的方法的,网上一搜就能查到很多. 但是如果是为Maven项目打Jar包,其实是很简单的,因为maven本身就有打Jar包的命令.   最简单的方法 ...

  10. SRS-开源流媒体服务器

    SRS 简介 SRS定位是运营级的互联网直播服务器集群,追求更好的概念完整性和最简单实现的代码.SRS提供了丰富的接入方案将RTMP流接入SRS, 包括推送RTMP到SRS.推送RTSP/UDP/FL ...