一.定宽：

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. gitlab web端使用

    https://jenkins.io/zh/doc/pipeline/tour/getting-started/ http://www.cnblogs.com/cheng95/p/6542036.ht ...

  2. python绘制世界人口地图

    最近看了<python编程:从入门到实践>,里边设计的项目拿来学习学习,绘制世界人口地图. 首先,下载数据,http://data.okfn.org/ ,从这里下载population_d ...

  3. 禁止tableview 像上滑动

    tableView有一个bounces属性.默认YES,所以tableView上下用力拉都会有弹性滑动,如下设置可以禁止,但是这样的话上下弹性都没了 而经常的需求是上方不要弹性,下方要弹性,可以用监听 ...

  4. 前端 HTML-CSS 规范

    黄金定律 一个项目应该永远遵循同一套编码规范! 不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的. HTML 语法 用两个空格来代替制表符(tab) – 这是唯一能保证在所有环境 ...

  5. 剑指Offer——数组中只出现一次的数字（一个很帅的异或解法）

    题目: 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 看题目脑子里就出现做法了: 遍历,用个HashMap来记录出现的次数,然后再遍历HashMap返回 ...

  6. Spring RestTemplate GET 请求参数

    @Test public void testUpdateProfitJson_GET_Params() throws BusinessException { String apiURL="U ...

  7. vs2017通过模块文件添加自定义注释

    有时我们在VS里建立类和接口时,需要添加比较规范的注释信息,而每次都要复制粘贴比较麻烦,所以需要我们的IDE做一些支持,比较修改VS里自定义的注释模式,以添加自己公司需要的信息格式. 注释比较规范,是 ...

  8. Java匹马行天下之JavaWeb核心技术——JSP

    JSP动态网页技术 一.JavaWeb简介 一.什么是JavaWeb? JavaWeb是用Java技术来解决相关web互联网领域的技术总称. 需要在特定的web服务器上运行,分为web服务器和web客 ...

  9. pat1079. Total Sales of Supply Chain (25)

    1079. Total Sales of Supply Chain (25) 时间限制 250 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHE ...

  10. php面试题分享

    1.nginx使用哪种网络协议? nginx是应用层 我觉得从下往上的话 传输层用的是tcp/ip 应用层用的是http fastcgi负责调度进程 2. <? echo 'hello tush ...