一.定宽：

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. 根据从redis缓存的数据查询出来，在从数据库中取出所有的数据，俩个数据进行比较，去掉重复，剩下库中新插入的数据，取出新数据，然后把redis中的缓存数据清空把从数据库中查出来的所有数据放到redis缓存中

    参考代码: public String getNewCenter(HttpServletRequest request,HttpServletResponse resonse){ JSONObject ...

  2. [Leetcode]007. Reverse Integer

    public class Solution { public int reverse(int x) { long rev=0; while(x!=0){ rev = rev*10+x%10; x=x/ ...

  3. Markdown 简单标签语言

    Markdownhttps://www.cnblogs.com/ixysy/p/6236782.html Markdown基本语法https://www.jianshu.com/p/191d1e21f ...

  4. ST的MCU系列

    一 STM32F1(M3)系列: 超值型系列STM32F100-  24 MHz最高主频 带马达控制和CEC功能 基本型系列STM32F101 - 36 MHz最高主频,具有高达1M字节的片上闪存 U ...

  5. HDU 5763 Another Meaning dp+字符串hash || DP+KMP

    题意:给定一个句子str,和一个单词sub,这个单词sub可以翻译成两种不同的意思,问这个句子一共能翻译成多少种不能的意思 例如:str:hehehe   sub:hehe 那么,有**he.he** ...

  6. (转)yi_meng linux 下 ifcfg-eth0 配置 以及ifconfig、ifup、ifdown区别

    linux 下 ifcfg-eth0 配置 以及ifconfig.ifup.ifdown区别 原文:https://www.cnblogs.com/yi-meng/p/3214471.html这3个命 ...

  7. 冷笑话，idea 按删除键就是undo？

    第一反应是keymap被改了,一看 那么,看起来就是alt出问题了 解决方法 在公司换一个键盘或者狂按alt

  8. vue resource patch方法的传递数据 form data 为 [object Object]

    今天在测试 iblog 登录时,传送过去的数据总是 [object Object],以至于后台识别不出来. vue 使用了 vueResource 组件,登录方法为 patch. 经过探索,终于在官网 ...

  9. WAS 查看服务状态

    进入目录下/opt/IBM/WebSphere/AppServer/profiles/AppSrv01/bin 查看服务状态命令# ./serverStatus.sh 服务名 例如: [root@lo ...

  10. 用python计算直角三角形斜边长

    直接上代码 import math def hypotenuse(a,b): return(math.sqrt(a**2+b**2)) side1 = int(input("第一条直角边:& ...