<!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. chrome插件的开发

    基本目录:icon,manifest,html,js. chrome插件的使用,运行,打包. chrome浏览器打开扩展,勾选开发者模式,点击加载没打包的扩展,选中目录,加载插件. 右上角出现插件图标 ...

  2. jquery实时获取时间

    $(document).ready(function(){ function time(){ var date=new Date(); var h=date.getHours(); var m=dat ...

  3. BZOJ.2597.[WC2007]剪刀石头布(费用流zkw)

    BZOJ 洛谷 \(Description\) 给定一张部分边方向已确定的竞赛图.你需要给剩下的边确定方向,使得图中的三元环数量最多. \(n\leq100\). \(Solution\) 这种选择之 ...

  4. 搭建 LAMP 环境

    1,搭建 MySQL 数据库 .安装 MySQL 使用 yum 安装 MySQL: yum install mysql-server -y 安装完成后,启动 MySQL 服务: service mys ...

  5. js数组根据指定字段（true or false）排序

    const obj = [ {name:'1',bind:true}, {name:'2',bind:false}, {name:'3',bind:true}, {name:'4',bind:fals ...

  6. ajax-异步加载片段

    片段一般用.htm后缀 下面是ajax加载片段的demo 涉及知识点为: jquery.load(url, data, callback); 必需的 URL 参数规定您希望加载的 URL. 可选的 d ...

  7. Html表格：

    (1)<table>标签:声明一个表格,它的常用属性如下: -- border属性 定义表格的边框,设置值是数值 -- cellpadding属性 定义单元格内容与边框的距离,设置值是数值 ...

  8. List集合的总结和应用场景的介绍

    1.List的整体介绍 List 是一个接口,它继承于Collection的接口,它代表着有序的队列.list的实现类对象中每一个元素都有一个索引值,能够按照索引值进行元素查找. AbstractLi ...

  9. Servlet(3)—Servlet

    基本知识: java Servlet是和平台无关的服务端组件,它运行在Servlet容器中,Servlet容器负责Servlet和客户的通信以及调用Servlet方法,Servlet和客户的通信采用& ...

  10. 【jvm】windows下查看java进程下多线程的相关信息

    微软工具:Process Explorer v15.3 下载地址:http://technet.microsoft.com/en-us/sysinternals/bb896653.aspx 参考教程: ...