html整体垂直居中,详解html的几种水平垂直居中的方式（基础）

几种水平垂直居中的方式（基础）"/>

html整体垂直居中,详解html的几种水平垂直居中的方式（基础）

前言

我们在编写马过程中，想必大家对水平垂直居中的方法了解并不多。所以我给大家总结式的列出几种常用的水平垂直居中的方法。

第一种方法

d第一种

.Centered1{

background-color: #800070;

width: 100%;

height:500px;

position: relative;

}

.Centered1 p{

width: 200px;

height: 200px;

background-color: deeppink;

line-height: 200px;

text-align: center;

position: absolute;

left: 0;

bottom: 0;

right:0;

top: 0;

margin: auto;

}

第二种方法

d第二种

/*第二种方法水平垂直居中*/

.Centered2{

background-color: #ef8518;

width: 100%;

height: 500px;

position: relative;

}

.Centered2 p {

position: absolute;

width: 200px;

height: 200px;

background-color:red;

line-height: 200px;

text-align: center;

left: 50%;

top:50%;

margin-left:-100px;

margin-top: -100px;

}

第三种方法

d第三种

/*第三种方法水平垂直居中*/

.Centered3{

background-color: dimgrey;

width: 100%;

height: 500px;

position: relative;

}

.Centered3 p {

position: absolute;

width: 200px;

height: 200px;

background-color:darkorange;

line-height: 200px;

text-align: center;

left: 50%;

top: 50%;

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

}

第四种方法

d第四种

/*第四种方法水平垂直居中,老版本flex布局*/

.Centered4{

background-color: #FF4444;

width: 100%;

height: 500px;

display: -webkit-box;

-webkit-box-pack:center;

-webkit-box-align: center;

}

.Centered4 p {

width: 200px;

height: 200px;

background-color:cadetblue;

line-height: 200px;

text-align: center;

}

第五种方法

d第五种

/*第五种方法水平垂直居中,新版本的flex水平垂直居中*/

.Centered5{

background-color: darkslateblue;

width: 100%;

height: 500px;

display: flex;

justify-content:center;

align-items: center;

}

.Centered5 p {

width: 200px;

height: 200px;

background-color:fuchsia;

line-height: 200px;

text-align: center;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。