元素居中是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. 使用poi读取Excel文件数据

    package com.haiyisoft.iecp.util; import java.io.File;import java.io.FileInputStream;import java.io.F ...

  2. 深入理解Spring Redis的使用 (五)、常见问题汇总

    目前我所知道的Redistemplate里面,我没有使用到的就是管道.这个可以进行批量的读写.类似于jdbc的batch.还有就是Redis的集群部署.但是由于我业务里没有这种需求,所以没有使用无法给 ...

  3. 【DFS】求水洼的数目

    题目: 有一个大小为 N*M 的园子,雨后积起了水.八连通的积水被认为是连接在一起的.请求出园子里总共有多少水洼?(八连通指的是下图中相对 W 的*的部分) *** *W* *** 限制条件:N, M ...

  4. [Swift]LeetCode691. 贴纸拼词 | Stickers to Spell Word

    We are given N different types of stickers. Each sticker has a lowercase English word on it. You wou ...

  5. 如何解决http请求返回结果中文乱码

    如何解决http请求返回结果中文乱码 1.问题描述 http请求中,请求的结果集中包含中文,最终以乱码展示. 2.问题的本质 乱码的本质是服务端返回的字符集编码与客户端的编码方式不一致. 场景的如服务 ...

  6. SpringBoot前后端分离Instant时间戳自定义解析

    在SpringBoot项目中,前后端规定传递时间使用时间戳(精度ms). @Data public class Incident { @ApiModelProperty(value = "故 ...

  7. 洛谷P1036选数（素数+组合数）

    题目链接:https://www.luogu.org/problemnew/show/P1036 主要考两个知识点:判断一个数是否为素数.从n个数中选出m个数的组合 判断一个数是否为素数: 素数一定是 ...

  8. idea设置代码颜色主题（同Sublime Text 3的代码颜色一样）

    1.下载主题的网址:http://color-themes.com,主题种类多,总有适合你的主题.在这个网址下载的主题是jar文件,直接导入,如下图file->import  Setting,找 ...

  9. Linux 设置自启动服务

     0 为停机,机器关闭.(千万不要把initdefault设置为0 )    1 为单用户模式,就像Win9x下的安全模式类似.    2 为多用户模式,但是没有NFS支持.    3 为完整的多用户 ...

  10. 使用Redmine的PHP API时，如何判断需求是否为原子需求

    使用Redmine的PHP API时,如何判断需求是否为原子需求 使用redmine的PHP接口时,怎样才能判断需求是否为原子需求呢,下面给出具体的做法: /** * 判断是否为原子需求, 即是否依然 ...