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. SQLServer 触发器 同时插入多条记录有关问题

    由于 SQL Server 的触发器, 没有 FOR EACH ROW (ORACL中有)的选项, 有时候不正确的使用 inserted 与deleted 可能会有点麻烦. 下面来一个简单的例子 -- ...

  2. SVN库实时同步设置

    为了安全起见,SVN服务器除了做定时全量备份和增量备份以外,如条件允许,可做实时备份. 这需要2台机器,一台是master server,另一台做mirror server.master做主服务,mi ...

  3. Implicitly Typed Local Variables

    Implicitly Typed Local Variables It happens time and time again: I’ll be at a game jam, mentoring st ...

  4. Android多媒体框架对音乐播放器的支持

    下面介绍一下Andriod多媒体框架对开发者提供的支持有哪些.               1. MediaScannerReceiver                   这个广播接收者在接收到A ...

  5. java 追加写入代码一例

    最近最项目参数化的时候用到,场景是这样的,需要测试A和B两个接口,其中B接口传入的参数必须是传递给A接口过的,所以整理一个思路就是: 1. 正常调用A接口,但是将传递给A接口的参数保存到文本里,此处要 ...

  6. 【nginx网站性能优化篇(3)】反向代理实现负载均衡

    注意,本篇文章为负载均衡的理论篇,后续找个机会推出实战篇.理论篇主要讲述如何配置负载均衡,配置负载均衡不难.难的是真正的实战,比如如何做到多服务器之间的数据共享(session,file等),多cac ...

  7. 两个List合并,过滤重复记录

    import java.util.ArrayList; import java.util.HashSet; import java.util.Hashtable; import java.util.I ...

  8. ibatis框架文件配置

    最近2天在学ibatis,心里也有一些心得,就把它写下来了. 首先是配置一下ibatis的环境,添加ibatis2.X.jar,mysql-connection-bin.5.1.8.jar,建立一个w ...

  9. 从svn删除文件夹和文件

    由于项目开始放在自己项目组的一个服务器上,而且svn也是自己在该服务器上搭建的,但是不知道是什么原因,svn上的代码被误删了.为了更稳定地使用svn,所以使用公司的svn来管理代码. 运维将不是最新版 ...

  10. 百度和 Google 的搜索技术是一个量级吗?

    著作权归作者所有. 商业转载请联系作者获得授权,非商业转载请注明出处. 作者:Kenny Chao 链接:http://www.zhihu.com/question/22447908/answer/2 ...