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. SVN--从本地检出项目至服务器报错--禁止访问

    错误描述: 原因:这是访问权限限制引起的. 查看/svn/test目录的权限--之前我修改过的 现在添加一个user就好了--这个添加的developer是我之前导入本地项目时已经验证过的,所以再导入 ...

  2. 【最小生成树】BZOJ 1196: [HNOI2006]公路修建问题

    1196: [HNOI2006]公路修建问题 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1435  Solved: 810[Submit][Sta ...

  3. Window 8.1 开启Wifi共享

    p{padding-left:20px;} Hosted network supported:Yes  支持Wifi共享 命令:netsh wlan set hostednetwork mode=al ...

  4. [wikioi]线段树练习 2

    http://codevs.cn/problem/1081/ #include <vector> #include <iostream> #include <string ...

  5. ibatis框架的sqlmapclient接口

    SqlMapClient,是iBatis中的重要接口,这个接口涉及到对SQL映射的执行和批处理. 现在,就先了解它的对query开头方法的定义. 首先是 queryForList 方法: //指定SQ ...

  6. React测试Mixin

    1.test.jsx var randomNumberMixin = require("./randomNumberMixin.jsx"); describe("test ...

  7. C++:友元(非成员友元函数、成员友元函数、友元类)

    3.8  友元:友元函数和友元类 友元函数 :既可以是不属于任何类的非成员函数,也可以是另一个类的成员函数,统称为友元函数.友元函数不是当前类的成员函数,而是独立于类的外部函数,但它可以访问该类所有的 ...

  8. 1、Web容器的理解&Tomcat的安装与配置

    Web容器的理解 <Java Web开发实战经典——基础篇>一书中对Web容器这一概念阐述得很好,借用其观点对Web容器加以理解: 想要运行一个Java Web的程序,则必须有相应的Web ...

  9. 利用qt打开一张图片并转成灰度矩阵

    首先是mat类,这个类的主要作用是构造一个容器,并将对应像素的灰度值放在容器内 #ifndef MAT_H #define MAT_H #include <vector> #include ...

  10. 课程设计之(struts2+Hibernate)航空订票系统

    1.题目 课程设计之航空订票系统 为某家机票预订服务商开发一个机票预订和查询管理系统.该系统中的航班和机票信息由多家航空公司负责提供.客户通过上网方式查询航班时间表.机票可用信息.机票折扣信息,可以远 ...