html 中有几种居中,css中几种常见的居中方式

直接上代码：

居中

{

margin: 0;

padding: 0;

}

/水平居中 margin : 0 auto; */

.box{

width: 300px;

height: 300px;

border: 2px solid red;

}

.img1{

display: block;

width: 100px;

height: 100px;

margin: 0 auto;

}

1.0.jpg

/*水平垂直居中*/

.box2{

width: 300px;

height: 300px;

position: relative;

border: 1px solid blue;

background: yellow;

}

.img2{

width: 100px;

height: 100px;

position: absolute;

top:50%;

left:50%;

margin-left: -50px;

margin-top: -50px;

}

2.0.jpg

/*水平垂直居中 2 */

.box3{

width: 300px;

height: 300px;

position: relative;

border: 1px solid blue;

}

.img3{

width: 100px;

height: 100px;

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

margin: auto;

}

3.0.jpg

/*水平垂直居中 3 css3新属性 */

.box4{

width: 300px;

height: 300px;

position: relative;

border: 1px solid blue;

}

.img4{

width: 100px;

height: 100px;

position: absolute;

top: 50%;

left: 50%;

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

}

4.0.jpg

/* table-cell 将其变为表格 */

.box5{

width: 300px;

height: 300px;

display: table-cell;

vertical-align: middle;

text-align: center;

border: 1px solid blue;

}

.img5{

width: 100px;

height: 100px;

}

5.0.jpg

/* flex布局完成 */

.box6{

width: 300px;

height: 300px;

display: flex;

justify-content: center;

align-items: center;

border: 1px solid blue;

}

.img6{

width: 100px;

height: 100px;

}

6.0.jpg