css布局：块级元素的居中

一.定宽：

1.定位居中(absolute)

方法一：

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

css:
.main{
  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{
  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{
     100%;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    justify-content:center;
    align-items:center;
}
.container{
     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{
    100%;
    height:100%;        
    display: table;
}
.main {
    display: table-cell;
    vertical-align: middle;
}
.inner{
     400px;
    height: 200px;
    background: #ccc;
    margin:0 auto;
}

相关阅读:
地图相关
爬虫机器人检测网站
Git 工作区、暂存区和版本库概念
linux镜像下载地址
selenium基本使用
socket 编程
视频观看时间统计
油猴脚本
（II）第十三节：使用注解创建Dao、Service、Controller Bean 组件
（II）第十一节：SpEL 表达式

原文地址：https://www.cnblogs.com/wangliuyong/p/8684289.html