<!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. 橡皮筋进度条ElasticProgressBar

    橡皮筋进度条ElasticProgressBar 橡皮筋进度条是一个极具动画效果的进度条.该进度条不仅具有皮筋效果,还带有进度数据显示,让用户可以很清晰的看到当前的进度,可用于下载.加载进度等场景.E ...

  2. XamarinAndroid组件教程设置自定义子元素动画(一)

    XamarinAndroid组件教程设置自定义子元素动画(一) 如果在RecyclerViewAnimators.Animators中没有所需要的动画效果,就可以自定义一个.此时,需要让自定义的动画继 ...

  3. 面试题fugui

    1.什么是栈溢出,在什么情况下可能会出现 栈溢出是由于C语言系列没有内置检查机制来确保复制到缓冲区的数据不得大于缓冲区的大小,因此当数据足够大时,将会溢出缓冲区的范围. python函数调用是通过栈这 ...

  4. LeetCode Weekly Contest 32

    581. Shortest Unsorted Continuous Subarray Given an integer array, you need to find one continuous s ...

  5. BZOJ4249 : Walls 防壁

    首先可以将攻击位置整理成折线,答案不变. 对于一个长度为$k$的询问,若折线不超过两段,那么显然可以暴力贪心求解. 否则考虑折线中最短的一段$x\rightarrow y$,若其长度$\leq k$: ...

  6. BZOJ4422 : [Cerc2015]Cow Confinement

    从右往左扫描线,用线段树维护扫描线上每一个点能达到的花的数量,并支持最近篱笆的查询. 对于一朵花,找到它上方最近的篱笆,那么它对这中间的每头牛的贡献都是$1$. 当扫到一个篱笆的右边界时,这中间的答案 ...

  7. C++程序设计方法3：虚函数

    向上映射与向下映射 派生类对象转换成基类对象,称为向上映射. 而基类对象转换成派生类对象,称为向下映射: 向上映射可由编译器自动完成,是一种隐式的自动类型转化: 凡是接受基类对象的地方(如函数参数)都 ...

  8. .net 相关性能计数器丢失问题解决方案

    1.开始运行:cmd 2.在cmd窗口中执行下面命令: cd c:\windows\system32 lodctr /R 执行完上面命令,会提示:“信息: 成功地从系统备份存储中重建性能计数器设置” ...

  9. linux查看服务安装目录

    linux查看服务安装目录server dir 假如我们想查看 Redis 的安装目录 如果用命令 which redis 或者 whereis redis 都找不到安装目录, 可使用以下办法: ps ...

  10. Set集合架构和常用实现类的源码分析以及实例应用

    说明:Set的实现类都是基于Map来实现的(HashSet是通过HashMap实现的,TreeSet是通过TreeMap实现的). (01) Set 是继承于Collection的接口.它是一个不允许 ...