CSS---水平居中，垂直居中，line-height

水平居中

1. 普通流inline

行内元素的话，设置父元素 text-align: center;

2. 普通流block

margin: 0 auto;
如果低版本IE不支持margin：0 auto；设置body{text-align: center}，给不需要居中的元素设置text-align: left;

3. 浮动元素

width: 200px;
position: absolute;
left: 50%;
// 方法一
margin-left: -100px;
// 方法二
transform: translateX(-50%);

4. 绝对定位

margin:0 auto;
或者使用浮动元素的两种方法

垂直居中

1. padding

优点：简单，只需要设置上下内边距
缺点：父元素不能设置固定高度

<div>
<span>xxxx</span>
</div>

div {
width: 200px;
padding-top: 50px;
padding-bottom: 50px;
}

2. line-height（单行文字）

优点：可设置父元素固定高度
确定：不太适合多行文字

<div>
<span>xxxx</span>
</div>

div {
width: 200px;
height： 100px;
}
// 如果div里面包裹的的块级标签，需要添加margin: 0;
span {
line-height: 100px;
}

3. flex

优点：简单易懂
缺点：兼容性
display: flex;
flex-direction: column;
justify-content: center;

4. table

ul {
display: table;
}
li {
display: table-cell;
vertical-align: middle;
}

5. grid

优点：布局很牛
缺点：兼容性，上手难度高

ul {
display: grid;
grid-template-columns: repeat(6, 1fr);
align-items: center;
justify-content: center;
}

6. absolute

position: absolute;
top: 50%;
transform: translateY(-50%);

7. 伪元素

<main>
<div class="search">
<form>
<input type="text">
<div class="button"></div>
</form>
</div>
</main>

.search {
display: inline-block;
vertical-align: middle;
}
main::after {
content: "";
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}

line-height

行距 = line-height 和 font-size 之差
文字的上下两部分评分行距，成为半行距

line-height的赋值：
normal 数字 长度 百分比

最后

以上就是威武唇膏为你收集整理的CSS---水平居中，垂直居中，line-height的全部内容，希望文章能够帮你解决CSS---水平居中，垂直居中，line-height所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。