元素居中是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. QEMU KVM Libvirt手册(10):Managing Virtual Machines with libvirt

    libvirt is a library that provides a common API for managing popular virtualization solutions, among ...

  2. 基于 TensorFlow 在手机端实现文档检测

    作者:冯牮 前言 本文不是神经网络或机器学习的入门教学,而是通过一个真实的产品案例,展示了在手机客户端上运行一个神经网络的关键技术点 在卷积神经网络适用的领域里,已经出现了一些很经典的图像分类网络,比 ...

  3. Vue 学习笔记 -- inline-template

    简书 更方便的使用私有子组件 定义一个私有子组件时,如果子组件的template过长会使得代码非常难以阅读 这时可以使用内联模版 但是如果写成这样 为毛用要子组件呢?

  4. [Swift]LeetCode467. 环绕字符串中唯一的子字符串 | Unique Substrings in Wraparound String

    Consider the string s to be the infinite wraparound string of "abcdefghijklmnopqrstuvwxyz" ...

  5. [Swift]LeetCode620. 有趣的电影 | Not Boring Movies

    SQL架构 Create table If Not Exists cinema (id ), description varchar(), rating , )) Truncate table cin ...

  6. 在 ns-3.25中添加 plc（电力线载波） 模块

    上一篇安装好了 ns-3.25,这里继续往里添加 plc 模块.整理之前现推荐一个网站,大家可以参考. 英属哥伦比亚大学(University of British Columbia,UBC)提供NS ...

  7. ubuntu 16.04 更改默认Python版本

    一般Ubuntu默认的Python版本都为2.x, 如何改变Python的默认版本呢?假设我们需要把Python3.5设置为默认版本: 首先查看Python默认版本: ubuntu@user~$:py ...

  8. Error: Default interface methods are only supported starting with Android N (--min-api 24): java.io.InputStream org.apache.poi.sl.usermodel.ObjectShape.readObjectData()

    项目运行的时候,如果报错 Error: Default interface methods are only supported starting with Android N (--min-api ...

  9. 《HelloGitHub月刊》第 08 期

    <HelloGitHub>第 08 期 兴趣是最好的老师,<HelloGitHub>就是帮你找到兴趣! 简介 最开始我只是想把自己在浏览GitHub过程中,发现的有意思.高质量 ...

  10. 以实例说明微服务拆分（以SpringCloud+Gradle）

    前言 之前,我都是说了很多的关于微服务的概念,说到底,很多人看了之后会认为没有什么意思,因为没有实际的东西说明,即使每个概念都明白了,也很难赋之实践.所以这次,我来用一个实际的例子去说明,在实际的项目 ...