一.定宽：

1.定位居中(absolute)

方法一：

html:

<div class="main"></main>

css:

.main{

  width:400px;

  height:200px;

  background:#eee;

  position:absolute;

  left:50%;

  top:50%;

  margin-left:-200px;

  margin-top:-100px;

}

方法二：

html:

<div class="main"></div>

css:

body {

    height: 100%;

}

.main{

 width: 400px;

   height: 200px;

  background:#eee;

  position:absolute;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

  margin: auto;

}

二.非定宽：

1.定位居中(absolute+translate)

html:

<div class="main">

    hello world

</div>

css:

.main{

  background:#eee;

  position:absolute;

  left:50%;

  top:50%;

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

}

2.flex布局

html:

    <body>

        <div class="main">

        </div>

    </body>

css:

html,body{

    width: 100%;

    height: 100%;

    display: -webkit-flex;

    display: flex;

    justify-content:center;

    align-items:center;

}

.container{

    width: 400px;

    height: 200px;

    background: #ccc;

}

3.table

html:

<body>

    <div class="container">

        <div class="main">

            <div class="inner"></div>

        </div>

    </div>

</body>

css:

html,body{

     height: 100%;

}

.container{

    width:100%;

    height:100%;

    display: table;

}

.main {

    display: table-cell;

    vertical-align: middle;

}

.inner{

    width: 400px;

    height: 200px;

    background: #ccc;

    margin:0 auto;

}

css布局：块级元素的居中的更多相关文章

  1. CSS行内元素和块级元素的居中

    一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...

  2. css构造块级元素

    css 1. 宽高width:数值;height:数值;也可用百分比!长高的设置不会被后代继承2. 背景(1)背景颜色background-color:颜色值;元素的背景颜色默认为transparen ...

  3. CSS 各类 块级元素 行级元素 水平 垂直 居中问题

    元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 行级元素 一块级元素 1 水平居中: ( ...

  4. css中块级元素、内联元素（行内元素、内嵌元素）

    Block element 块级元素    顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...

  5. CSS的块级元素和内联元素，以及float

    说明:之前有一点搞错了,就是float其实是浮动起来,其它元素会位于它的底层. 最近在系统地学习HTML5,感觉补上了好多缺失的知识. 例如: 锚点定位其实可以通过 id 来实现: CSS 使用 !i ...

  6. html页面中块级元素的居中

    第一:在页面中使用 margin: 0 auto;居中: <div> <p>夜屋</p> </div> div { width: 100%; posit ...

  7. CSS的块级元素和内联元素的概念

    三生有幸,偶然之下知道了<CSS世界>这本书,让我产生了探究 CSS 的想法. 这里对 CSS 中的块级元素和内联元素的概念做一个简单的整理. 可能对于我们前端开发人员来讲,一般接触到的元 ...

  8. css的块级元素和行级元素

    块级元素 概念: 每个块级元素都是独自占一行.  元素的高度.宽度.行高和边距都是可以设置的.   元素的宽度如果不设置的话,默认为父元素的宽度(父元素宽度100%) <address>/ ...

  9. HTML+CSS基础 块级元素div分析 文档流 脱离文档流的方法

    块级元素div分析 1.外边距  margin 2.内边距 padding 3.边框  border Div的真实宽度=width+margin-left+margin-right+border*2+ ...

  10. 深入认识CSS的块级元素

    2019独角兽企业重金招聘Python工程师标准>>> 块级元素: 显示在一块内,会自动换行,元素会从上到下垂直排列,各自占一行.每个块级元素默认占一行高度,一行内添加一个块级元素后 ...

随机推荐

  1. Django框架base.py源码

    url.py文件 from django.conf.urls import url from django.contrib import admin from app_student import v ...

  2. 【SQL Server 优化性能的几个方面】(转)

    转自:http://blog.csdn.net/feixianxxx/article/details/5524819     SQL Server 优化性能的几个方面 (一).数据库的设计 可以参看最 ...

  3. 练习四十六：列表排序，删除list中重复的元素

    方法一:使用集合set;将list直接转换为set a = [1,3,4,3,5,7] a = list(set(a)) print(a) 执行结果: [1, 3, 4, 5, 7] 方法二:直接排序 ...

  4. MySQL存储过程的动态行转列

    MySQL存储过程中使用动态行转列 最近做项目关于数据报表处理,然而数据库存储格式和报表展现形式不同,需要进行一下行转列的操作,在做上一个项目的时候也看了一下,但是后来换了读取方式,也就没深入研究这个 ...

  5. LCS(Longest Common Subsequence)

    http://blog.csdn.net/zztfj/article/details/6157429 LCS(Longest Common Subsequence) 就是求两个字符串最长公共子串的问题 ...

  6. volatile底层原理详解

    今天我们聊聊volatile底层原理: Java语言规范对于volatile定义如下: Java编程语言允许线程访问共享变量,为了确保共享变量能够被准确和一致性地更新,线程应该确保通过排它锁单独获得这 ...

  7. xmanger图形化登陆远程服务器

    由于网上的资料比较杂,经过本人整理实际操作验证,保证ok  本人的服务器系统为centos5.8 下面的都是centos服务器上的操作,需要简单的配置下: win客户端使用xmanger软件:首先是服 ...

  8. client的使用

    document.documentElement.clientHeight = 464 // 指窗口的可见高度的大小 document.body.clientHeight = 1577 // 指窗口的 ...

  9. [Environment Build] 工作中遇到的关于Git的问题

    修改已经提交的commit中的author, commit git commit --amend --author 'Your Name <Your Email>' git commit ...

  10. OS进程同步与通信

    信号量机制 信号量用于互斥 P(S) 临界区 V(S) ----- P(S) 临界区 V(S) 生产者消费者: typedef int semaphore //信号量值设置为1就是互斥量 semaph ...