<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    .demo {

        line-height: 44px;

        margin-bottom: 20px;

        text-align: center;

        background-color: #0078e7;

        color: #fff;

    }

    .flex-equal, .flex-center, .justify {

        display: -webkit-box;

        display: -ms-flexbox;

        display: -webkit-flex;

        display: flex;

    }

    .flex-center {

        -webkit-box-pack: center;

        -ms-flex-pack: center;

        -webkit-justify-content: center;

        justify-content: center;

        -webkit-box-align: center;

        -ms-flex-align: center;

        -webkit-align-items: center;

        align-items: center;

    }

    .demo-center .children {

        background: #0078e7;

        color: #fff;

        width: 150px;

        line-height: 5;

        text-align: center;

    }

    .demo-center {

        border: 1px solid #ccc;

        margin: 20px;

        height: 200px;

    }

    .translate-center {

        position: relative;

    }

    .demo-center .children {

        background: #0078e7;

        color: #fff;

        width: 150px;

        line-height: 5;

        text-align: center;

    }

    .translate-center .children {

        position: absolute;

        top: 50%;

        left: 50%;

        -webkit-transform: translate(-50%, -50%);

        transform: translate(-50%, -50%);

    }

    .table-equal {

        display: table;

        table-layout: fixed;

        width: 100%;

    }

    .table-equal li {

        display: table-cell;

    }

    .container {

        width: 100%;

        height: 80px;

        background: #C2300B;

        padding-top:10px;

        text-align:center;

    }

    .center{

        display:inline-block;

        border:2px solid #fff;

    }

    .center{

        _display:inline;

    } /*针对ie6 hack*/

    .center a{

        float:left;

        border:1px solid #fff;

        padding:5px 10px;

        margin:10px;

        color:#fff;

        text-decoration:none;

    }

    #vc {

        display:table;

        background-color:#000;

        width:100%;

        height:200px;

        overflow:hidden;

        margin-left:50px;

        _position:relative;

    }

    #vci {

        vertical-align:middle;

        display:table-cell;

        text-align:center;

        _position:absolute;

        _top:50%;

        _left:50%;

    }

    #content {

        color:#fff;

        border:1px solid #fff;

        display:inline-block;

        _position:relative;

        _top:-50%;

        _left:-50%;

     }

    </style>

</head>

<body>

    <h2>flex居中</h2>

    <div class="flex-center demo-center">

        <div class="children">子元素水平垂直居中</div>

    </div>

    <h2>translate居中</h2>

    <div class="translate-center demo-center">

        <div class="children">子元素水平垂直居中子元素水平垂直居中</div>

    </div>

    <h2>div宽度不固定的div如何设置水平居中</h2>

    <div class="container">

        <div class="center">

           <a href="#">1</a><a href="#">2</a><a href="#">3</a>

        </div>

    </div>

    <h2>table居中高度不固定的div垂直居中</h2>

    <div id="vc">

        <div id="vci">

            <div id="content">

                我们垂直居中了，我们水平居中了,真的是可以居中的吗，<br />

                你信不信我反正是新了<br />

                年轻化互联网团队！

            </div>

        </div>

    </div>

</body>

</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#循环语句整理

    for.while.do while和switch暂时没发现与c++的不同,这里只整理foreach. foreach foreach的作用是遍历集合中的所有元素.foreach语句中的表达式由关键字 ...

  2. [NOIp2013提高组]积木大赛/[NOIp2018提高组]铺设道路

    [NOIp2013提高组]积木大赛/[NOIp2018提高组]铺设道路 题目大意: 对于长度为\(n(n\le10^5)\)的非负数列\(A\),每次可以选取一个区间\(-1\).问将数列清零至少需要 ...

  3. [USACO18DEC]The Cow Gathering

    Description: 给定一棵树,每次删去叶子,有m个限制,分别为(a,b)表示a需要比b先删,为每个点能否成为最后被删的点 Hint: \(n,m \le 10^5\) Solution: 手模 ...

  4. [P1082][NOIP2012] 同余方程 (扩展欧几里得/乘法逆元)

    最近想学数论 刚好今天(初赛上午)智推了一个数论题 我屁颠屁颠地去学了乘法逆元 然后水掉了P3811 和 P2613 (zcy吊打集训队!)(逃 然后才开始做这题. 乘法逆元 乘法逆元的思路大致就是a ...

  5. 为什么要DevOps？

    Boss:「项目经常延期」「做东西太慢」 产品: 「老板的想法总变」 「事情太多,忙成狗」 「开发说这个实现不了」 开发: 「需求总变」 「UI 方案给的太晚」 「活儿太多」 测试: 「需求变了没提前 ...

  6. JS中原始类型Null和Undefined

    Undefined类型只有一个值,即undefined.当声明的变量还未被初始化时,变量的默认值为undefined.Null类型也只有一个值,即null.null用来表示尚未存在的对象,常用来表示函 ...

  7. 3ds max学习笔记（十六）-- 摄像机

    摄像机添加以及应用技巧:可以更改观察的视点和空间广阔,模拟景深和运动模糊效果: 1,添加:更改观察的角度和位置,增加场景透视感: 基本操作: 景深:

  8. px2rem

    vue做移动端适配,借助px2rem 插件方便的将px单位转为了rem 1.安装 npm install px2rem-loader  lib-flexible --save 2.在项目入口文件mai ...

  9. html冲刺

    html知识点回顾与面试题<!--1.<DOCTYPE>告诉浏览器当前文档要以何种HTML或者XHTML规范解析2.语义标签strong 粗体em 斜体del 删除线ins 下划线 ...

  10. JQ01

    JQ01 1.使用js的缺点 innerText的兼容性问题:低版本火狐浏览器不支持 textContent:火狐支持,ie678不支持 2.JQ初体验 1) <!DOCTYPE html> ...