整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
相信前端童鞋在日常的布局中一定遇到过各种各样的布局情形，而各种居中的方法一定不占少数。这里我给大家分享几种居中的方式，并且简单的解析一下他们的原理。
绝对定位居中
居中效果展示
简易代码如下：
<style type="text/css" media="screen">
.box{
background:#ccc;
height:100px;
width:200px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
<div class="box">
</div>
解析：这个主要是用position: absolute;来实现垂直居中.
我们都知道margin：auto;是可以实现水平居中的。
只添加margin：auto；实现水平居中
浏览器计算的div[class="box"]盒子模型
浏览器计算的body的盒子模型
那当我们添加绝对定位的时候，box这个div就会脱离文档流，变成块状元素（你可能会问box本来就是块状元素的div啊，是的，但是如果这里是span当然包含所有内敛元素都会变成块状元素。可以看下《说说行内元素与块级元素以及之间的转换？》）。
添加绝对定位后的表现
浏览器计算的div[class="box"]盒子模型
浏览器计算的body的盒子模型
可以明显的看出box脱离了原本的正常文档流，body高度为0。
再次添加top: 0; left: 0; bottom: 0; right: 0; ps：这里去除了box的宽度限定
添加 top: 0; left: 0; bottom: 0; right: 0;的表现
浏览器计算的div[class="box"]盒子模型
浏览器会为box元素包裹一层新的盒子，因此这个元素会填满它相对父元素的内部空间，这个相对父元素可以是body标签，或者是一个非静态（默认）定位的容器。
添加宽高后
给元素设置了宽高以后，浏览器会阻止元素填满所有的空间，根据margin: auto; 的要求，重新计算，并包裹一层新的盒子。既然块元素是绝对定位的，又脱离了普通文档流，因此浏览器在包裹盒子之前会给margin-top和margin-bottom设置一个相等的值。
于是就产生了绝对居中的效果。
那如果想要在父容器里面垂直居中呢。只需要给父容器添加position: relative;或者position: fixed;都是可以的。
.part{
width:400px;
height:400px;
background:red;
position:relative;
}
.box1{
background:#ccc;
height:100px;
width:200px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
<div class="part">
<div class="box1">
</div>
</div>
居中的效果
绝对居中的好处：
布局块可以自由调节大小
无需额外的dom节点
自适应布局，可以使用百分比和最大最小高宽等样式
居中时不考虑元素的padding值（也不需要使用box-sizing样式）
img的图像也可以使用
跨浏览器，兼容性好（无需hack，可兼顾IE8~IE10）
同时注意：
必须声明元素高度
推荐设置overflow:auto;样式避免元素溢出，显示不正常的问题
这种方法在Windows Phone上不起作用
今天这篇居中文章就写到这了，之后还会介绍其他几种居中方法，请继续关注哦！
0
本例参考了网上的例子，唯一不一样的是，我这里的操作是一步一步讲解，网上仅是源码。
一、我们先创建一张空白的网页，网页要自适应手机。
图1
二、我们再创建网页的头部。
图2
图3
三、做出来的网页头部太丑了，我们要去掉盒子与浏览器的间隙，还有给头部加内部距离。
图4
图5
四、给网页头部添加一些内容。
图6
图7
五、接下来开始做导航条了。
图8
图9
六、发现没，导航条居然看不见，没有东西在里面自然是看不见的，我们加三个链接吧。
图10
图11
七、这回是看见了，不过样式太丑，我们改改样式。
图12
图13
八、加上内部距离，就好看了许多，即然是链接，我们加点动态吧，当鼠标在链接上面时，链接块变色。
图14
图15
九、开始做网页内容，网页内容我分为三块，左右两边是侧栏，中间是主要内容。
图16
图17
十、我想让它横着排，它却是竖着排，改改各个块的样式。
图18
图19
十一、给主体的各个块加点内容。
图20
图21
十二、内容是有了，但你会发现各块之间没有间隙，贴得太近了，我们改一下样式，加个内部距离。
图22
图23
十三、距离是有了，但有一个侧栏跑到了另一行，怎么回事？原来padding是会改变盒子的整体宽度，我们原本是100%，现在多了padding的宽度，自然就换行了，解决一下吧。
图24
图25
十四、这回终于在一行了，接下来可以做网页底部了。
图26
图27
十五、改改样式，让底部好看一点。
图28
图29
十六，这个时候，网页的整体版面就完成了，再补充一个小内容，让网页浏览器在小于600像素宽的时候，主体内容的三个块由横变竖。
图30
图31
【CSS Grid入门】看这一篇就够了：从零开始掌握网格布局艺术
### 引言
CSS Grid布局是近年来CSS领域的一项重大革新，它为Web开发者提供了一种强大、灵活且直观的方式来创建二维网格布局，彻底改变了我们构建网页布局的方式。本文将带你从零开始学习CSS Grid，通过一系列详细的示例和代码，让你一次性掌握这项革命性的布局技术。
### 一、CSS Grid基础概念
**1.1 容器与网格项**
- **grid container**：通过将display属性设置为grid或inline-grid，将一个元素变为网格容器。
```html
<div class="grid-container">
<!-- 网格项 -->
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<!-- 更多网格项... -->
</div>
<style>
.grid-container {
display: grid;
/* 其他Grid属性 */
}
</style>
```
**1.2 网格线与网格单元格**
- **grid lines**：网格线是网格布局中的分界线，分为行(grid-row)和列(grid-column)。
- **grid cells**：相邻的行和列网格线之间的区域称为网格单元格。
### 二、CSS Grid布局属性详解
**2.1 网格模板定义**
- `grid-template-columns` 和 `grid-template-rows`：定义每一行和每一列的大小。
```css
.grid-container {
grid-template-columns: repeat(3, 1fr); /* 3等份 */
grid-template-rows: auto 1fr; /* 第一行自适应，第二行填满剩余空间 */
}
```
**2.2 网格区域命名与定位**
- `grid-template-areas`：为每个网格项指定区域名称并布局。
```css
.grid-container {
grid-template-areas:
"header header header"
"main main sidebar"
"footer footer footer";
}
.header {
grid-area: header;
}
.main {
grid-area: main;
}
.sidebar {
grid-area: sidebar;
}
.footer {
grid-area: footer;
}
```
**2.3 网格项目的定位**
- `grid-column` 和 `grid-row`：直接指定网格项目的起始和结束网格线。
```css
.item-a {
grid-column: 1 / 3; /* 从第一列到第三列 */
grid-row: 2 / 4; /* 从第二行到第四行 */
}
```
### 三、CSS Grid进阶特性
**3.1 自动布局：fr单位与auto-fill/auto-fit**
```css
.grid-container {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 根据窗口大小自动填充列 */
}
```
**3.2 对齐与间距**
- `justify-items`、`align-items`、`justify-content`、`align-content`：控制网格项目和行/列的对齐方式。
```css
.grid-container {
justify-items: center; /* 横向居中 */
align-items: start; /* 纵向顶部对齐 */
justify-content: space-between; /* 行间间距均匀分布 */
}
```
**3.3 动态网格：响应式布局**
根据不同的断点调整网格布局，实现响应式设计。
```css
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr; /* 在小屏幕下变为单列布局 */
}
}
```
### 四、实战案例：使用CSS Grid构建常见布局
**4.1 两栏布局**
```html
<div class="grid-container">
<div class="sidebar">侧边栏</div>
<div class="main">主要内容区</div>
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: 200px 1fr;
}
</style>
```
**4.2 复杂网格布局（例如，杂志布局）**
此处提供一个复杂的网格布局示例，通过CSS Grid实现类似杂志布局的复杂排版。
```html
<!-- 省略布局HTML代码 -->
```
### 结语
通过这篇全面的CSS Grid入门教程，你已掌握了网格布局的基本要素与实用技巧。然而，CSS Grid的奥妙远不止于此，它的强大之处在于其无比灵活和自由的布局能力。继续深入研究和实践，你将在项目中发现更多的可能性，使你的Web设计变得更加优雅、高效。祝你在CSS Grid的道路上越走越远，享受到它带来的便利与乐趣！
*请认真填写需求信息，我们会在24小时内与您取得联系。
