效果图 - 在线案例

css3中的属性：transform: translate(x,y)

.box {

width: 100px;

height: 100px;

background: orange;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

}

使用flex布局

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

padding: 0;

}

.box {

width: 100px;

height: 100px;

background: orange;

}

使用绝对定位

加上margin-left: -(width为盒子的一半), margin-top: -(height为盒子的一半)

.box {

width: 100px;

height: 100px;

background: orange;

position: absolute;

left: 50%;

top: 50%;

margin-left: -50px;

margin-top: -50px;

}

其他8种方式-在线案例

元素垂直水平居中

body {

background-color: #6ed0ff;

}

.father {

background-color: #be33ec;

border-radius: 20px;

box-shadow: 0 0 15px rgb(0, 0, 0);

margin: 100px auto;

width: 300px;

height: 300px;

}

.son {

background-color: #fcff00;

border-radius: 20px;

box-shadow: 0 0 10px rgb(0, 0, 0);

width: 100px;

height: 100px;

}

实现子盒子相对于父盒子垂直居中效果

grid

.father {

display: grid;

}

.son {

align-self: center;

justify-self: center;

}

absolute +(-margin)

.father {

position: relative;

}

.son {

position: absolute;

left: 50%;

top: 50%;

margin-left: -50px;

margin-top: -50px;

}

absolute + transform

.father {

position: relative;

}

.son {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

}

absolute + margin: auto

.father {

position: relative;

}

.son {

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

}

flex

.father {

display: flex;

justify-content: center;

align-items: center;

}

margin+transfrom

.father {

overflow: hidden;

}

.son {

margin: 50% auto;

transform: translateY(-50%);

}

table-cell

.father {

display: table-cell;

text-align: center;

vertical-align: middle;

}

.son {

display: inline-block;

}

inline-block + vertical-align

.father {

text-align: center;

line-height: 300px;

}

.son {

display: inline-block;

vertical-align: middle;

}