html如何让div上下居中 css,前端面试CSS系列——DIV垂直水平居中

怎么让一个div 垂直水平居中

代码片段// HTML

绝对定位.parent{

position:relative;

}

// 第一种

.child{

position:absolute;

top:50%;

left:50%;

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

}

// 第二种(需要固定宽高)

.child{

position:absolute;

width:100px;

height:100px;

top:50%;

left:50%;

margin-left:-50px;

margin-top:-50px;

}

// 第三种(需要固定宽高)

.child{

position:absolute;

width:100px;

height:100px;

left:0;

top:0;

bottom:0;

right:0;

margin:auto;

}

// 第四中(固定宽高 + transform变形)

.child{

position: absolute;

width: 100px;

height: 100px;

left: 50%;

top: 50%;

background: yellow;

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

}

flex布局.parent {

width: 500px;

height: 500px;

background: pink;

display: flex;

align-items: center;

justify-content: center;

}

// 子元素可以固定宽高

.parent. child {

width: 100px;

height: 100px;

background: yellow;

}

// 子元素不设置宽高

.parent. child {

background: yellow;

}

table-cell.parent {

width: 500px;

height: 500px;

display: table-cell;

text-align: center;

vertical-align: middle;

background: pink;

}

.parent .child {

display: inline-table;

/*

// 这种写法也可以

display: inline-block;

display: inline; */

width: 100px;

height: 100px;

background: yellow;

}

Grid.parent {

width: 500px;

height: 500px;

display: grid;

background: pink;

}

.parent .child {

align-self: center;

justify-self: center;

width: 100px;

height: 100px;

background: yellow;

}

总结

让一个div垂直水平居中有两种情况，第一种是元素不固定宽高的，有三种方式使用绝对定位加transform偏移

使用flex布局，设置align-items:center;justify-content:center;

使用grid布局，设置align-self:center; justify-self:center;

如果元素有固定宽高，可以使用：绝对定位+transform偏移

绝对定位+负margin值

绝对定位+margin:auto

不固定宽高的三种方式

参考