html让矩形居中,CSS-七种方式实现垂直居中

一、table自带功能

HTML

这是文字这是文字这是文字

复制代码

CSS

.parent {

border: 1px solid red;

height: 300px;

}

.child {

border: 1px soild green;

}

复制代码

二、100%高度的after、before加上inline block

HTML

这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字

复制代码

CSS

.parent {

border: 3px solid red;

height: 300px;

text-align: center;

}

.child {

border: 3px solid black;

display: inline-block;

width:150px;

vertical-align: middle;

}

.parent .before{

outline: 3px solid red;

display: inline-block;

height: 100%;

vertical-align: middle;

}

.parent .after{

outline: 3px solid red;

display: inline-block;

height: 100%;

vertical-align: middle;

}

复制代码

三、div装成table

HTML

这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字

复制代码

CSS

div.table {

display: table;

border: 1px solid red;

height: 600px;

}

div.tr {

display: table-row;

border: 1px solid green;

}

div.td{

display: table-cell;

border: 1px solid blue;

vertical-align: middle;

}

.child {

border: 5px solid black;

}

复制代码

四、margin-top：-50px

HTML

这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字

复制代码

CSS

.parent {

border: 1px solid red;

height: 300px;

position: relative;

}

.child {

border: 1px solid green;

width: 300px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -150px;

height: 100px;

margin-top: -50px;

}

复制代码

五、transform: translate(-50%,-50%)

HTML

这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字

复制代码

CSS

.parent {

border: 1px solid red;

height: 300px;

position: relative;

}

.child {

border: 1px solid green;

position: absolute;

top: 50%;

left: 50%;

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

}

复制代码

六、position: absolute; margin: auto;

HTML

这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字

复制代码

CSS

.parent {

border: 1px solid red;

height: 300px;

position: relative;

}

.child {

border: 1px solid green;

position: absolute;

width: 200px;

height: 100px;

margin: auto;

top: 0;

bottom: 0;

left: 0;

right: 0;

}

复制代码

七、flex布局 justify-content: center; align-items: center;

HTMl

这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字

复制代码

CSS

.parent {

border: 1px solid red;

height: 300px;

display: flex;

justify-content: center;

align-items: center;

}

.child {

border: 1px solid green;

width: 200px;

}

复制代码