CSS居中方法总结

---

theme: condensed-night-purple

highlight: agate

前言：本文记录文本居中、水平居中、垂直居中、万能居中方法以及绝对居中方法，若有错误还请指正！

1.文本居中

+height + line-height：两者配合使用，垂直方向居中 + text-align：父级的 text-align，水平方向居中

注意：text-align：center ；只是将子元素里的内联元素居中 如果不是内联元素就要用到 margin： 0 auto； html <div class="word"> <p>优秀</p> </div> css .word { width: 100px; height: 30px; background-color: #e5e5e5; text-align: center; line-height: 30px; font: size 14px; } 优秀这两个字在 div 中妥妥居中。

2.水平居中

水平居中分两种情况

• 定宽块元素水平居中

定宽 + 块元素 ```html

css .wrap { width: 200px; height: 200px; border: 1 soild red; margin: 0 auto; /宽度必须给值/ } ```

+ 不定宽块元素水平居中 + 改变为行内元素,然后使用 text-align:center 处理,多用于不定项导航的 ul 的居中 html <div> <ul> <li>11111</li> <li>22222</li> </ul> </div> css .nav {text-align:center;} .nav ul {display: inline;}

+ 不定宽块元素水平居中

3.父元素浮动 left：50%;

同时要设置position:relative(给子元素相对定位一个参考)

子元素相对定位position：relative；left：-50%； ```html

子盒子

css .parent { position: relative; left: 50%; float: left; width: 300px; height: 300px; background-color: pink; }

.parent .son { position: relative; left: -50%; width: 150px; height: 150px; background-color: red; } ```

4.垂直居中

垂直居中也分两种情况

• 块级元素垂直居中，子元素知道具体宽高

设置 top:50%，这个块元素的最上边为垂直居中的位置，但是这样整体的内容并不是垂直居中，所以要设置 margin-top: -2/父宽 px; //为高度的一半,这样这个块元素又相对于自身最上面向上又移动了自身的 50 因此就垂直居中了。 ```html

```

• 子元素不知道具体宽高

• 这种情况有三种方法:

  • 借助 table 布局 + display：table-cell 实现法 + display：table-cell 主要针对多行文字内容的垂直居中对齐 + display:table-cell 此元素会作为一个表格单元格显示(类似 <td>和 <th>) css div { display: table-cell; width: 200px; height: 200px; text-align: center; vertical-align: middle; border: 1px solid #F00; }

  • 借助 translate 的 transform 属性 ```css .parent{ position: relative; }

    .parent .son { position: absolute; top: 50%; transform: translateY(-50%); } ```

  • 用 flex 布局 css .parent { display: flex; flex-direction: column; justify-content: center; }

    5.万能居中方法

  首先移动子元素高度(宽度)的一半：left：50%;(top:50%;)

  再移动父元素高度(宽度)的一半：margin-left:-宽/2;(margin-top:-高/2;)

前提:必须要知道子元素的宽高 ```html

```

效果如下：

总结： 居中的方法有很多，不局限以上这几种居中方法