CSS 盒子垂直居中的方法

margin: 0 auto;

}

.son {

width: 200px;

height: 200px;

background-color: pink;

border: 1px solid #000;

margin-top: 50%; // 向下移动父盒子的一半

transform: translateY(-50%); // 向上移动自身盒子的一半

}

/* 通过 定位来移动*/

.father {

width: 500px;

height: 500px;

background-color: skyblue;

border: 1px solid #000;

margin: 0 auto;

position: relative;

}

.son {

width: 200px;

height: 200px;

background-color: pink;

border: 1px solid #000;

position: absolute;

top: 50%; // 先向下移动父盒子的一半

margin-top: -100px; // 再向上移动自身盒子的一半

}

3、知道父盒子的高度，可以使用 margin 计算盒子的上下边距，来使盒子居中。

.father {

width: 500px;

height: 500px;

background-color: skyblue;

border: 1px solid #000;

margin: 50px auto;

}

.son {

width: 200px;

height: 200px;

background-color: pink;

border: 1px solid #000;

margin-top: 149px; // 根据父盒子的高度指定 margin-top 即可

}

二、盒子水平居中的方法

1、使用 margin: 0 auto;

.father {

width: 500px;

height: 500px;

background-color: skyblue;

border: 1px solid #000;

margin: 50px auto;

}

.son {

width: 200px;

height: 200px;

background-color: pink;

border: 1px solid #000;

margin: 0 auto; // 让盒子左右自动适应，想当于 left:auto; right:auto

}

2、通过计算 margin 左右边距来实现居中

.father {

width: 500px;

height: 500px;

background-color: skyblue;

border: 1px solid #000;

margin: 50px auto;

}

.son {

width: 200px;

height: 200px;

background-color: pink;

border: 1px solid #000;

margin-left: 149px; // 父盒子的定宽的，指定 margin-left 即可

}

3、先让盒子左右边缘和父盒子垂直的中心线垂直，然后把子盒子往回移动自身宽度的一半

/* 通过 transform 实现*/

.father {

width: 500px;

height: 500px;

background-color: skyblue;

border: 1px solid #000;

margin: 50px auto;

}

.son {

width: 200px;

height: 200px;

background-color: pink;

border: 1px solid #000;

margin-left: 50%; // 先移动父盒子的一半

transform: translateX(-50%); // 再移动自身盒子一半

}

/通过 定位实现/

.father {

width: 500px;

height: 500px;

background-color: skyblue;

border: 1px solid #000;

margin: 50px auto;

position: relative;

}

.son {

width: 200px;

height: 200px;

background-color: pink;

border: 1px solid #000;

position: absolute;

left: 50%; // 向右移动父盒子一半

margin-left: -100px; // 向左移动自身盒子一半

/* transform: translateX(-50%); */ //向左移动自身盒子一半 38 }