Css上下居中

---

前言

【Css】上下居中效果

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、水平居中

1、对于行内元素和行内块：

1>
text-align: center;（需要在设置盒子的父级使用）

.farther{
width: 500px;
height: 300px;
border:1px solid #ccc;
text-align: center;
}
span{
font-size: 14px;
}

2>
padding：上下px 左右px;（上下为0，左右一样数值）

padding: 0px 10px;

**

2、对于块级来说：

**

1>
display: table;（父元素来设置）

2>
margin: 0 auto; (第一个值可改数值）

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

.fat{
width: 500px;
height: 400px;
position: relative;
}
.son{
position: absolute;
left: 50%;
transform: translateX(-50%)
}

注意：盒子需要有宽高，给当前盒子设置绝对定位，父级盒子设置相对定位

二.垂直居中

1、对于行内元素和行内块：

1>
line-height: px;（父级的高度）
padding：上下px 左右px;（上下数值一样，左右为0）

padding: 10px 0;

2、对于块级来说

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

.fat{
width: 500px;
height: 400px;
position: relative;
}
.son{
position: absolute;
top: 50%;
transform: translateY(-50%)
}

注意：盒子需要有宽高，给当前盒子设置绝对定位，父级盒子设置相对定位

总结

有些并没有提供便捷代码，以上可解决大部分遇到的上下居中问题