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;)
- 借助 table 布局 + display:table-cell 实现法 + display:table-cell 主要针对多行文字内容的垂直居中对齐 + display:table-cell 此元素会作为一个表格单元格显示(类似
前提:必须要知道子元素的宽高 ```html
```
效果如下:
总结: 居中的方法有很多,不局限以上这几种居中方法