一.定宽：

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. input和button不同高 和 rem

    rem的使用 浏览器中默认的字体大小是 16px,此时为 100%.当我们在使用 rem 的时候,常常给 html设置为 html{font-size:62.5;},这样的好处是 1rem 刚好为 1 ...

  2. LeetCode初级算法(树篇)

    目录 二叉树的最大深度 验证二叉搜索树 对称二叉树 二叉树的层次遍历 将有序数组转换为二叉搜索树 二叉树的最大深度 二叉树,所以可以考虑用递归来做.由于根节点已经算过了,所以需要加上1:每次返回都是以 ...

  3. POJ2758 Checking the Text 哈希

    注意到插入次数挺少的,于是每次暴力重构,然后哈希+二分 #include<cstdio> #include<iostream> #include<algorithm> ...

  4. SerializeUtil

    import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.ObjectInpu ...

  5. JPA规范基础 ppt教程

    https://wenku.baidu.com/view/5ca6ce6a1eb91a37f1115cee.html

  6. Juniper srx 550建立NAT端口映射

    一.Juniper srx 550建立NAT端口映射 公司Juniper srx 550路由器,因为很少去设置,所以怕到时设置时步骤又给忘记了,这里做个备注,以便日后查 NAT配置界面介绍: Rule ...

  7. LL_01

    http://www.52pojie.cn/thread-262602-1-1.html C http://www.92jh.cn/forum.php?mod=viewthread&tid=1 ...

  8. Kotlin容器

    1. 容器 可变/不可变 List<out T> 只读list; MutableList<T>; Set<out T>/MutableSet<T> Ma ...

  9. Mybatis-Plus使用全解

    前言 之前写了<SpringBoot | 第九章:Mybatis-plus的集成和使用>一文,只是简单的使用条件构造器列举了一些通用的CURD操作.本人也想写一篇通用的关于mybatis- ...

  10. OC与JS交互前言

    OC与JS交互过程中,可能会需要使用本地image资源及html,css,js文件,这些资源应该如何被加载? 一.WebView加载HTML UIWebView提供了三个方法来加载html资源 1.  ...