<!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# winform 弹出确认消息框

    if (MessageBox.Show("确认删除?", "此删除不可恢复", MessageBoxButtons.YesNo) == DialogResult ...

  2. logging模块、sys模块、shelve模块

    一.logging模块 1.logging模块就是用于记录日志的,日志就是记录某个时间点,发生的事情. 2.记录日志是为了日后来复查,提取有用的信息. 3.如何去记录日志:可以直接打开文件,记录信息, ...

  3. 解决SpringBoot的@Autowired无法注入问题

    问题:@Autowired无法自动注入 思路:SpringBoot项目的Bean装配默认规则是根据Application类所在的包位置从上往下扫描!"Application类"是指 ...

  4. [机器学习入门篇]-Logistic函数与Softmax函数

    1.Logistic函数 在维基百科中,对logistic函数这样介绍道: A logistic function or logistic curve is a common "S" ...

  5. C#文件及数据流技术

    空间名称:Sysytem.IO 一.文件.文件夹操作1.创建.删除.移动.复制文件 2.创建.删除.移动.复制文件夹 二.流操作 1.FileSream - 提供读取和写入文件的方式 文本文件的写入与 ...

  6. BZOJ3736 : [Pa2013]Karty

    显然只需要考虑与障碍点相邻的格子,通过旋转坐标系,可以只考虑障碍点在格子上方的情况. 悬线法求出每个点往上的最长延伸距离$x$,以及往左往右的延伸距离$y$. 那么当$r\geq x$时,$c$至多为 ...

  7. Nginx （安装+ 配置域名+ 访问认证 +发布文件）

    一.Nginx介绍: Nginx是一款高性能的HTTP和反向代理服务器,能够选择高效的epoll(linux2.6内核).kqueue(freebsd).eventport(solaris10)作为网 ...

  8. 移动端根元素（html）的设置

    1.通过js设置 <script> document.documentElement.style.fontSize = document.documentElement.clientWid ...

  9. 【并查集】Connectivity @ABC049&amp;ARC065/upcexam6492

    Connectivity 时间限制: 1 Sec  内存限制: 128 MB 题目描述 There are N cities. There are also K roads and L railway ...

  10. MediaInfo代码阅读

      MediaInfo是一个用来分析媒体文件的开源工具. 支持的文件非常全面,基本上支持所有的媒体文件. 最近是在做HEVC开发,所以比较关注MediaInfo中关于HEVC的分析与处理. 从Meid ...