1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.     .demo {
  8.         line-height: 44px;
  9.         margin-bottom: 20px;
  10.         text-align: center;
  11.         background-color: #0078e7;
  12.         color: #fff;
  13.     }
  14.     .flex-equal, .flex-center, .justify {
  15.         display: -webkit-box;
  16.         display: -ms-flexbox;
  17.         display: -webkit-flex;
  18.         display: flex;
  19.     }
  20.  
  21.     .flex-center {
  22.         -webkit-box-pack: center;
  23.         -ms-flex-pack: center;
  24.         -webkit-justify-content: center;
  25.         justify-content: center;
  26.         -webkit-box-align: center;
  27.         -ms-flex-align: center;
  28.         -webkit-align-items: center;
  29.         align-items: center;
  30.     }
  31.     .demo-center .children {
  32.         background: #0078e7;
  33.         color: #fff;
  34.         width: 150px;
  35.         line-height: 5;
  36.         text-align: center;
  37.     }
  38.     .demo-center {
  39.         border: 1px solid #ccc;
  40.         margin: 20px;
  41.         height: 200px;
  42.     }
  43.  
  44.     .translate-center {
  45.         position: relative;
  46.     }
  47.     .demo-center .children {
  48.         background: #0078e7;
  49.         color: #fff;
  50.         width: 150px;
  51.         line-height: 5;
  52.         text-align: center;
  53.     }
  54.     .translate-center .children {
  55.         position: absolute;
  56.         top: 50%;
  57.         left: 50%;
  58.         -webkit-transform: translate(-50%, -50%);
  59.         transform: translate(-50%, -50%);
  60.     }
  61.  
  62.     .table-equal {
  63.         display: table;
  64.         table-layout: fixed;
  65.         width: 100%;
  66.     }
  67.     .table-equal li {
  68.         display: table-cell;
  69.     }
  70.     .container {
  71.         width: 100%;
  72.         height: 80px;
  73.         background: #C2300B;
  74.         padding-top:10px;
  75.         text-align:center;
  76.     }
  77.     .center{
  78.         display:inline-block;
  79.         border:2px solid #fff;
  80.     }
  81.     .center{
  82.         _display:inline;
  83.     } /*针对ie6 hack*/
  84.     .center a{
  85.         float:left;
  86.         border:1px solid #fff;
  87.         padding:5px 10px;
  88.         margin:10px;
  89.         color:#fff;
  90.         text-decoration:none;
  91.     }
  92.     #vc {
  93.         display:table;
  94.         background-color:#000;
  95.         width:100%;
  96.         height:200px;
  97.         overflow:hidden;
  98.         margin-left:50px;
  99.         _position:relative;
  100.     }
  101.     #vci {
  102.         vertical-align:middle;
  103.         display:table-cell;
  104.         text-align:center;
  105.         _position:absolute;
  106.         _top:50%;
  107.         _left:50%;
  108.     }
  109.     #content {
  110.         color:#fff;
  111.         border:1px solid #fff;
  112.         display:inline-block;
  113.         _position:relative;
  114.         _top:-50%;
  115.         _left:-50%;
  116.      }
  117.     </style>
  118. </head>
  119. <body>
  120.     <h2>flex居中</h2>
  121.     <div class="flex-center demo-center">
  122.         <div class="children">子元素水平垂直居中</div>
  123.     </div>
  124.     <h2>translate居中</h2>
  125.     <div class="translate-center demo-center">
  126.         <div class="children">子元素水平垂直居中子元素水平垂直居中</div>
  127.     </div>
  128.     <h2>div宽度不固定的div如何设置水平居中</h2>
  129.     <div class="container">
  130.         <div class="center">
  131.            <a href="#">1</a><a href="#">2</a><a href="#">3</a>
  132.         </div>
  133.     </div>
  134.     <h2>table居中高度不固定的div垂直居中</h2>
  135.     <div id="vc">
  136.         <div id="vci">
  137.             <div id="content">
  138.                 我们垂直居中了，我们水平居中了,真的是可以居中的吗，<br />
  139.                 你信不信我反正是新了<br />
  140.                 年轻化互联网团队！
  141.             </div>
  142.         </div>
  143.     </div>
  144. </body>
  145. </html>

　　

css实现高度或者宽度不固定的div元素垂直左右居中的更多相关文章

  1. 【转】纯 CSS 实现高度与宽度成比例的效果

    先来演示页面:Demo; 转的内容: 最近在做一个产品列表页面,布局如右图所示.页面中有若干个 item,其中每个 item 都向左浮动,并包含在自适应浏览器窗口宽度的父元素中. item 元素的 C ...

  2. CSS实现高度和宽度自适应

    其实用绝对定位也可以实现高度和宽度的自适应,从而出现自适应大小的区域及滚动条. <%@ Page Language="C#" AutoEventWireup="tr ...

  3. CSS之文本溢出隐藏，不定宽高元素垂直水平居中、禁止页面文本复制

    1.如何让不固定元素宽高的元素垂直水平居中 .center { position: absolute; top: 50%; left: 50%; background-color: #000; wid ...

  4. css实现高度不固定的div元素模块在页面中水平垂直居中

    <!DOCTYPE html><html>    <head>        <title>Laravel</title> <link ...

  5. 纯 CSS 实现高度与宽度成比例的效果

    http://zihua.li/2013/12/keep-height-relevant-to-width-using-css/

  6. 【CSS学习】--- 文本水平对齐属性text-align和元素垂直对齐属性vertical-align

    一.文本水平对齐属性---text-align text-align属性是将块级标签以及单元格里面的内容进行相应的对齐,块级标签里的内联元素会被整体进行移动,而子块级元素或子单元格则会继承父元素的te ...

  7. 转：CSS设置HTML元素的高度与宽度的各种情况总结

    1.元素不设宽度第一种情况:元素为文档流中元素<!-- 父元素宽度为100px --><div style="width:100px;">     < ...

  8. 纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

    纯CSS实现移动端常见布局--高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...

  9. DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

随机推荐

  1. C# 多线程示例

    static void Main(string[] args) { Thread t1 = new Thread(new ThreadStart(TestMethod)); Thread t2 = n ...

  2. js变量和函数声明的提升

    函数声明和变量声明总是会被解释器悄悄地被“提升”到方法体的最顶部 请注意,变量赋值并没有被提升,只是声明被提升了. 函数的声明比变量的声明具有高的优先级. 下面的程序是什么结果? var foo =  ...

  3. python基础一 ------如何统计一个列表元素的频度

    如何统计一个列表元素的频度 两个需求: 1,统计一个随机序列[1,2,3,4,5,6...]中的出现次数前三的元素及其次数 2,统计一片英文文章中出现次数前10 的单词 两种方法: 1,普通的for循 ...

  4. （转自知乎）Unicode编码

    很多人都把Unicode编码挂在嘴边,其实咱们现实生活中遇到的编码基本都是Unicode的 因为Unicode兼容了大多数老版本的编码规范例如 ASCII Unicode编码定义了这个世界上几乎所有字 ...

  5. 20172310 2017-2018-2 《程序设计与数据结构》实验三报告（敏捷开发与XP实践）

    20172310 2017-2018-2 <程序设计与数据结构>实验三报告(敏捷开发与XP实践) 课程:<程序设计与数据结构> 班级: 1723 姓名: 仇夏 学号:20172 ...

  6. H5微信单页读书日活动

    1. 页面方面 (1)单页面应用,使用jquery 绑定click事件来控制页面更换显示 (2)ajax请求获取图片数据,和海报名人名言数据 2.微信分享 (1)配置签名,后台导入微信第三方库配置签名 ...

  7. JS 私有变量

    严格来讲,JS之中没有私有成员的概念:所以对象属性都是公有的.不过,倒是有一个私有变量的概念. 任何在函数中定义的变量,都可以认为是私有变量,因为不能在函数的外部访问这些变量. 私有变量包括函数的参数 ...

  8. pygame 笔记-6 碰撞检测

    这一节学习碰撞检测,先看原理图: 2个矩形如果发生碰撞(即:图形有重叠区域),按上图的判断条件就能检测出来,如果是圆形,则稍微变通一下,用半径检测.如果是其它不规则图形,大多数游戏中,并不要求精确检测 ...

  9. 国际化之iPhone设备支持的语种

    有没有想过,iPhone 语言到底支持多少语言呢?我倒是搜索了一下,整理出下面一份列表,供大家参考 参考链接: https://www.ibabbleon.com/iOS-Language-Codes ...

  10. 14、Spark的核心术语

    Application:spark应用程序,就是用户基于spark api开发的程序,一定是通过一个有main方法的类执行的,比如java开发spark,就是在eclipse中,建立的一个工程 App ...