1. 水平居中

  • 如果是inline元素:在父元素上面设置text-align:center;
  • 如果是block元素:设置宽度和margin:0 auto;
  • 如果是多块级元素:在父元素上面设置text-align:center;所有的子元素上面设置display:inline-block;

2. 垂直居中相对于水平居中要复杂些,结合自己的需求自己对待

  • 不知道元素具体的高:可以根据padding-top和padding-bottom来
  • 不知道元素具体的高:父元素设置成display:table,子元素设置成display:table-cell,vertical-align:middle;
  • 不知道元素具体的高:父元素设置position:relative;子元素设置position:absolut;trandform:translateY(-50%)
  • 知道元素具体的高是单行:如果是单行的可以根据line-height=height
  • 知道具体的高:position:absolute;top:50%;margin-top:-width/2

3. 不知道元素具体的宽和高的居中情况:父元素position:relative;子元素position:absolute;top:50%;left:50%;trandform:translateY(-50% -50%)

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垂直水平居中的整理

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

  7. CSS垂直水平居中

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

  8. css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法?)

    实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...

  9. css实现div不定宽高垂直水平居中解决方案

    在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...

随机推荐

  1. Asp.Net原理Version2.0

    有些部分被省略,可以看看Asp.Net原理Version1.0 Asp.Net原理Version3.0_页面声明周期

  2. jquery的一些用法

    一.选择器 单选按钮:$(this).find(".answer").find("input[name='answer_" + id + "']:ch ...

  3. 增强学习(Reinforcement Learning and Control)

    增强学习(Reinforcement Learning and Control)  [pdf版本]增强学习.pdf 在之前的讨论中,我们总是给定一个样本x,然后给或者不给label y.之后对样本进行 ...

  4. Android串口通信(基于Tiny6410平台)

    友善之臂的Android系统有他们自己编写的一个串口通信程序,网上没有找到他的源代码,而且界面操作不在一个界面,不是很方便,这里我自己写了一个粗糙点的串口通信程序. 同样这里还是调用友善之臂的frie ...

  5. POJ 1699 Best Sequence(DFS)

    題目鏈接 題意 : 將幾個片段如圖所示方法縮成一個序列,求出最短這個序列. 思路 : 其實我也不知道怎麼做.....看網上都用了DP.....但是我不會.....這個DP不錯,還有用KMP+状压DP做 ...

  6. 解决 Ubuntu 开机 Waiting for 60 seconds more for network configuration

    sudo vim /etc/network/interfaces, 将该文件的内容修改为如下:(也就是说删掉其他的什么auto eth0.auto wlan0) auto lo iface lo in ...

  7. *[topcoder]LongWordsDiv2

    http://community.topcoder.com/stat?c=problem_statement&pm=13147 此题关键在于发现ABAB的组合最多有26*26种,可以穷举,然后 ...

  8. 为什么需要用到序列化?为什么HttpSession中对象要序列化

    简单说就是为了保存在内存中的各种对象的状态,并且可以把保存的对象状态再读出来.虽然你可以用你自己的各种各样的方法来保存Object States,但是Java给你提供一种应该比你自己好的保存对象状态的 ...

  9. 客户端一个http连接包含两个方向,一个是这个http连接的输入,另一个是这个http连接的输出。

    1.客户端一个http连接包含两个方向,一个是这个http连接的输入,另一个是这个http连接的输出. 利用httpclient进行ip地址和端口号连接后,http的输出端作为http请求参数设置.h ...

  10. MSSQL2005数据库自动备份问题(到同一个局域网上的另一台电脑上)

    有A数据库服务器,B本机:    我现在想通过在B机器上通过代码调用SQL来执行A数据库的备份到B机器上    调用的SQL语句为:Backup Database MYDATABASE To Disk ...