怎么将html中纵向拉开,css 实现常用的6种垂直剧中方式

1、绝对定位，利用负边距

html 部分

复制代码

css 部分

.box1{

display: table-cell;

vertical-align: middle;

text-align: center;

height: 100px;

width: 100%;

background-color: pink;

position: relative;

}

.content1 {

background-color: burlywood;

width: 200px;

height: 50px;

position: absolute;

left: 50%;

top: 50%;

margin-top: -25px;

margin-left: -100px;

overflow: auto;

}

复制代码

2、绝对定位，margin:auto

html 部分

复制代码

css 部分

.box2{

display: table-cell;

vertical-align: middle;

text-align: center;

height: 100px;

width: 100%;

background-color: pink;

position: relative;

margin-top: 10px;

}

.content2 {

background-color: burlywood;

width: 200px;

height: 50px;

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

margin: auto;

overflow: auto;

}

复制代码

3、flex布局

html 部分

复制代码

css 部分

.box3{

display: flex;

height: 100px;

width: 100%;

align-items: center;

justify-content: center;

background-color: pink;

margin-top: 10px;

}

.content3 {

background-color: burlywood;

width: 200px;

height: 50px;

overflow: auto;

line-height: 50px;

text-align: center;

}

复制代码

4、line-height = 元素高度

html 部分

垂直剧中 line-height

复制代码

css 部分

.box4{

height: 100px;

width: 100%;

background-color: pink;

margin-top: 10px;

line-height: 100px;

text-align: center;

}

复制代码

5、transform

html 部分

复制代码

css 部分

.box5{

height: 100px;

width: 100%;

background-color: pink;

margin-top: 10px;

position: relative;

}

.content5 {

position: absolute;

background-color: burlywood;

top: 50%;

left: 50%;

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

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

}

复制代码

6、table布局

html 部分

垂直剧中 Table

垂直剧中 Table

复制代码

css 部分

.box6{

height: 100px;

width: 100%;

background-color: pink;

margin-top: 10px;

display: table;

}

.content6 {

text-align: center;

vertical-align: middle;

display: table-cell;

background-color: burlywood;

}

复制代码