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. HDU 4681 String 最长公共子序列

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=4681 题意: 给你a,b,c三个串,构造一个d串使得d是a,b的子序列,并且c是d的连续子串.求d最大 ...

  2. 【BZOJ】【3143】【HNOI2013】游走

    数学期望/高斯消元/贪心 啊……用贪心的思路明显是要把经过次数期望越大的边的权值定的越小,那么接下来的任务就是求每条边的期望经过次数. 拆边为点?nonono,连接x,y两点的边的期望经过次数明显是 ...

  3. idea从vcs引入maven项目报错

    一.问题 用idea从cvs上check out的maven项目,打开后,发现依赖的jar包都有红色下划线.检查本地的maven库中有对应的包,那就是依赖有问题,idea没有在本地找到对应的包. 二. ...

  4. 01-03-02-1【Nhibernate (版本3.3.1.4000) 出入江湖】CRUP操作--cascade 级联相关

    要点: 1. <!--双向关联时要用: inverse:由子表来维护关系,cascade:级联的关系 如果没有这个设置, 插入Customer成功(即使现在Order插入Order抛异常,这时产 ...

  5. uva 10303

    卡特兰数  但是个高精度 一开始用最普通的递推式 超时了 百度百科了一下 用另类递推式过了 ~~ 这个大数类是做数据结构课程设计的时候写的... #include <cstdio> #in ...

  6. Boost简介

    原文链接:  吴豆豆http://www.cnblogs.com/gdutbean/archive/2012/03/30/2425201.html Boost库 Boost库是为C++语言标准库提供扩 ...

  7. zoj 3716 Ribbon Gymnastics (思维数学题)

    题目 以四个顶点为圆心画圆,圆面积不能重合,求四个圆的直径和最大是多少. #define _CRT_SECURE_NO_WARNINGS #include<string.h> #inclu ...

  8. 【leetcode】Majority Element (easy)(*^__^*)

    Given an array of size n, find the majority element. The majority element is the element that appear ...

  9. node.js 安装、图文详解

    网上的教程很多,有些模糊不清,有些版本太旧,有些是.exe安装,本文讲述windows系统下简单nodejs .msi环境配置.最新版是Current version: v0.10.26.官网下载地址 ...

  10. hdu 1426 Sudoku Killer

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1426 #include<stdio.h> #include<math.h> #in ...