css垂直水平居中方案
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垂直水平居中方案的更多相关文章
- CSS垂直水平居中方法总结
在布局的时候经常能用到居中,在此总结一下 html结构: <div class="wrap"> <div class="content"> ...
- 关于css垂直水平居中的几种方式
css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简单,加上line-height: ...
- css 垂直+水平居中
垂直+水平居中是一个老生常谈的问题了,现在就固定高度和不固定高度两种情况去讨论 1.父盒子固定高度[定位] 实现1: father-box: position:relative child-box:p ...
- css 垂直水平居中总结
一.前言: 垂直居中有很多方式,我们要做的不是写出完美代码,而是在合适的情况下根据需求选择合适方式. 主要方式: line-height 绝对定位 表格 display:table-cell 主要需求 ...
- CSS垂直水平居中方法整理
CSS定位中常常用到垂直居中,比如覆盖层上的弹框. 兼容性比较好的方法: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transition ...
- (转载)css垂直水平居中的整理
方法一 .demo1 { width:180px; height:180px; line-height:180px; *font-size:160px; border:1px solid #ddd; ...
- CSS垂直水平居中
小小的总结一下:行内元素水平居中用text-align: center;块级元素水平居中用margin-left: auto; margin-right: auto; 首先讨论一下单行时的情况. 毫无 ...
- css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法?)
实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...
- css实现div不定宽高垂直水平居中解决方案
在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...
随机推荐
- 【BZOJ】【2157】旅游
LCT 直到动手写拆边为点的时候才发现根本不会写……去orz了一下Hzwer(话说这题应该也用不着LCT吧……下次再换种姿势写一遍好了) /****************************** ...
- hibernate4.0中SessionFactory的创建
创建SessionFactory 首先创建Configuration对象,主要方式是: new Configuration().configure() 默认情况下Hibernate会去classPat ...
- 在线最优化求解(Online Optimization)之一:预备篇
在线最优化求解(Online Optimization)之一:预备篇 动机与目的 在实际工作中,无论是工程师.项目经理.产品同学都会经常讨论一类话题:“从线上对比的效果来看,某某特征或因素对xx产品的 ...
- C# Socket服务器端如何判断客户端断开
使用Socket类中的Poll方法,就可以. Socket client //假如已经创建好了,连接到服务器端得Socket的客户端对象. 我们只要client.Poll(10,SelectMode. ...
- 01-06-01【Nhibernate (版本3.3.1.4000) 出入江湖】事务
Nhibernate事务的使用: public void Add(Customer customer) { ISession session = _sessionManager.GetSession( ...
- c++ 虚继承与继承的差异 (转)
转自:CSDN dqjyong 原文链接:http://blog.csdn.net/dqjyong/article/details/8029527 前面一篇文章,说明了在C++ 虚继承对基类构造函数调 ...
- CentOS中基于不同版本安装重复包的解决方案
http://blog.chinaunix.net/uid-21710705-id-3039675.html
- C Primer Plus之高级数据表示
抽象数据类型(ADT) 类型是由什么组成?一个类型(type)指定两类信息:一个属性集和一个操作集. 所以您想定义一个新的数据类型.首先,您需要提供存储数据的方式,可能是通过设计一个结构.第二 ...
- Oracle 学习笔记(二)
1.创建用户,一般是具有dba权限的用户才能使用: create user 用户名 identified by 密码; 2.删除用户: drop user 用户名,注意,如果用户拥有对象,则不能直接删 ...
- lintcode:Add Binary 二进制求和
题目: 二进制求和 给定两个二进制字符串,返回他们的和(用二进制表示). 样例 a = 11 b = 1 返回 100 解题: 和求两个链表的和很类似 考虑进位,考虑最后一项的进位 0+0 = 0 不 ...