自学，刚接触dw，实在是烧脑

怎么将页面整体居中，求解，本人太笨，试了好多，不知道是不是写错了，第一次自学开始用。

在html中添加div标签
在css文件中设置div标签的样式，将其宽度设置为固定值，并将左右设置为maigin:auto
这样就可以实现居中啦，望采纳！

我给你看下我的笔记吧。
### 4, 水平居中

<!--块级元素-->
<div class="box" style="border: #0aa66e solid 1px;height: 200px;width: 400px;">
      <div class="content" style="width:100px; background-color: #0A8CD2">
            我是块级元素，我要水平居中。或者还有垂直居中.我定宽不定高.
      </div>
</div>
<br><br><br>
<!--行内元素-->
<div class="box" style="border: #0aa66e solid 1px;height: 200px;width: 400px;">
      <span class="inlineContent" style="background-color: #0A246A;">我是行内元素，我要水平居中。</span>
</div>

行内元素 ：只需要紧邻父级 text-align:center;

块级元素：

• （定宽）方式一：margin: 0 auto;

• （定宽）方式四 绝对定位：父级：position: relative;当前元素：position:absolute; top:0; left: calc(50% - 50px);50% 减去自身宽度。

• （不定宽）方式二inline-block: 父级 ，text-align: center; 当前元素：display: inline-block;

• (不定宽)方式三flex：父级: display:flex; justify-content:center:

• （不用定宽）transform：

  • 父级：

    position: relative;
    

  • 当前元素：

    position:absolute; left:50%;
    transform: translateX(- 50%);
    

**

5, 垂直居中**

**单行行内元素：** `line-height`等于盒子 `height`"，即行高等于盒子的高"

**多行行内元素：** 父元素设置 `display:table-cell`;和`vertical-align: middle`;

**块级元素：**

- （定高）绝对定位 : 父级：`position: relative;`当前元素：`position:absolute; top:calc(50% - 50px); left: 0`  50% 减去自身高度。
- （不用定高）**flex**：父级：`display: flex; align-item: center;`
- （不用定高）transform：父级：`position: relative;`当前元素：`position:absolute; top:50%; transform: translateY(- 50%)`