元素居中是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. python Tags 母板 组件 静态文件相关 自定义simpletag inclusion_tag

    一.Tags(一)for 1.基本用法 <ul> {% for user in user_list %} <li>{{ user.name }}</li> {% e ...

  2. 动态添加echarts

    本次只贴js和jsp代码 jsp只需添加一个div即可, <div class="fLayout-right-box"> <hy:layoutArea width ...

  3. 【RL-TCPnet网络教程】第24章 RL-TCPnet之网络控制报文协议ICMP

    第24章     RL-TCPnet之网络控制报文协议ICMP 本章节为大家讲解ICMP(Internet Control Message Protocol,网络控制报文协议),通过前面章节对TCP和 ...

  4. 【Nim游戏】高僧斗法

    先来看看Nim定理: // 若干堆硬币,二人轮流取,从一堆硬币中取几个 直到某个人不能取硬币 那这个人就输了 // 3 4 5 // 3 3 把硬币变成相同的 那么你就赢了 因为你可以跟着另一个人一样 ...

  5. Android OpenSL ES 开发：Android OpenSL 录制 PCM 音频数据

    一.实现说明 OpenSL ES的录音要比播放简单一些,在创建好引擎后,再创建好录音接口基本就可以录音了.在这里我们做的是流式录音,所以需要用至少2个buffer来缓存录制好的PCM数据,这里我们可以 ...

  6. #Java学习之路——基础阶段（第七篇）

    我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...

  7. [Swift]LeetCode673. 最长递增子序列的个数 | Number of Longest Increasing Subsequence

    Given an unsorted array of integers, find the number of longest increasing subsequence. Example 1: I ...

  8. [Swift]LeetCode689. 三个无重叠子数组的最大和 | Maximum Sum of 3 Non-Overlapping Subarrays

    In a given array nums of positive integers, find three non-overlapping subarrays with maximum sum. E ...

  9. Redis 设计与实现 （七）--事务

    事务 *ACID,指数据库事务正确执行的四个基本要素的缩写.包含:原子性(Atomicity).一致性(Consistency).隔离性(Isolation).持久性(Durability) redi ...

  10. Ubuntu终端常用快捷键（精简）

    Ubuntu中的许多操作在终端(Terminal)中十分的快捷,记住一些快捷键的操作更得心应手.在Ubuntu中打开终端的快捷键是Ctrl+Alt+T.其他的一些常用的快捷键如下: 快捷键与功能 Ta ...