一.定宽：

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. web综合案例03

    web综合案例03 web综合案例03 web综合案例03 web综合案例03 ... 待复习

  2. Vue里的nextTick方法

    官方解释: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 自己总结: `Vue.nextTick(callback)`,当数据发生变化,更新后执 ...

  3. JS——数组、==和===的区别

    创建数组的方式: 1) <script type='text/javascript'> var aRr = new Array(1,2,3,4,'abc',3) </script&g ...

  4. Jenkins之自动触发部署之插件Generic Webhook Trigger Plugin

    一.安装好插件 二.构建触发器会出现设置trigger的入口 三.设置的两个部分 第一: Jenkins的这个触发器,这里主要是接受post数据.其中Post content parameters是用 ...

  5. 牛客网Java刷题知识点之构造函数是什么、一般函数和构造函数什么区别呢、构造函数的重载、构造函数的内存图解

    不多说,直接上干货! 构造函数是什么? 构建创造对象时调用的函数. 构造函数是一种特殊的函数,用来在对象实例化时初始化对象的成员变量. 注意: 创建对象都必须要通过构造函数初始化. 构造函数的特点   ...

  6. 是时候搞清楚 Spring Boot 的配置文件 application.properties 了！

    在 Spring Boot 中,配置文件有两种不同的格式,一个是 properties ,另一个是 yaml . 虽然 properties 文件比较常见,但是相对于 properties 而言,ya ...

  7. Spring事务管理的注解方式

    使用注解实现Spring的声明式事务管理,更加简单! 步骤: 1) 必须引入Aop相关的jar文件 2) bean.xml中指定注解方式实现声明式事务管理以及应用的事务管理器类 3)在需要添加事务控制 ...

  8. NewStar 信息分发系统设计

    目录 NewStar 信息分发系统设计 我想要怎么做 系统流程图 解释和初步的模板展示 NewStar 信息分发系统设计 我们在全世界发布网站本质就是向全世界分发我们的信息给客户/潜在客户,然后希望促 ...

  9. idea关闭sonar自动扫描

    file-setting-other setting-sonar相关的setting全部关闭

  10. cairo-dock天气位置代码

    cairo-dock天气位置代码: 城市: 北京CHXX0008哈尔滨CHXX0046长春CHXX0010沈阳CHXX0119大连CHXX0019天津CHXX0133呼和浩特CHXX0249乌鲁木齐C ...