<!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. Linux 系统分级及root权限相关

    单用户模式修改用户密码 救援模式 让我们先来了解一下linux的运行步骤 1. Linux系统引导的顺序掌握Linux系统引导的顺序:BIOSMBRKernelinit其中,BIOS的工作是检查计算机 ...

  2. 自己总结的C#编码规范--5.如何写好注释篇

    本文是读完前言中提到的几本书后,结合自身的想法总结出来的如何写好注释的一些比较实用的方法. 另外本文是上一篇 注释篇 的一个补充 如何写好注释 避免使用不明确的代词 有些情况下,"it&qu ...

  3. webpack打包之有依赖js模块

    一.入口文件main.js var isd = require('./depend.js'); if(isd.isDepend){ console.log('有依赖模块'); } else { con ...

  4. ENQUIRE the predecessor to the World Wide Web.

    看Building Responsive Data Visualization for the Web时介绍到了Enquire,表示wiki类系统实现了它的核心思想. 有点好奇是如何实现的,所以大概看 ...

  5. Scrapy基础(七)————图片的简单下载

    scrapy 提供了自动下载图片到本地的功能,通过项目管道设置 一: 在setting 文件中ITEM_PIPELINE添加: 'scrapy.pipelines.images.ImagesPipel ...

  6. [JOISC2014]バス通学

    [JOISC2014]バス通学 题目大意: 有\(n(n\le10^5)\)个点和\(m(m\le3\times10^5)\)条交通线路.第\(i\)条交通线路可以让你在时间\(x_i\)从\(a_i ...

  7. js 函数与类的区别

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. [POJ3614]Sunscreen (贪心)

    题意 (依然来自洛谷) 有C个奶牛去晒太阳 (1 <=C <= 2500),每个奶牛各自能够忍受的阳光强度有一个最小值和一个最大值,太大就晒伤了,太小奶牛没感觉. 而刚开始的阳光的强度非常 ...

  9. C++学习笔记52:查找

    //函数查找 template <class T> int seqSearch(const T list[], int n, const T &key) { ; i < n; ...

  10. innerHTML innerText与outerHTML间的区别

    innerHTML与innerText及outerHTML间的区别最容易使初学者搞混淆,为了更好的使读者区分开.下面我就通过一个demo来解释: 代码: <!DOCTYPE html>&l ...