html不用class怎么居中

第一种：将元素通过display：inline-block转化为行内块元素居中，例如：

box{width:500pxheight:500pxbox-shadow:0 0 5px #000text-align:centerfont-size:0}

box {width:120pxheight:100pxbackground:#0f0display:inline-blockvertical-align:middle}

box:after{content:""display:inline-blockheight:100%vertical-align:middle}

第二种：用定位的方式将之移动到位置，例如:

box{width:500pxheight:500pxbox-shadow:0 0 5px #000position:relative}

box {width:120pxheight:100pxbackground:#0f0

position:absoluteleft:0right:0top:0bottom:0margin:auto}

第三种：类似第二中只不过通过百分比调整位置，例如

box{width:500pxheight:500pxbox-shadow:0 0 5px #000position:relative}

box {width:120pxheight:100pxbackground:#0f0position:absoluteleft:50%top:50%margin:-50px 0 0 -60px}

第四种：类似第三种，但是在调整回到中心位置时使用transform：translate( ，)进行调整，例如

box{width:500pxheight:500pxbox-shadow:0 0 5px #000position:relative}

box {width:120pxheight:100pxbackground:#0f0

position:absoluteleft:50%top:50%transform:translate(-50%，-50%)}

第五种：使用弹性盒(display：flex)，例如

box{width:500pxheight:500pxbox-shadow:0 0 5px #000display:flexjustify-content:centeralign-items:center}

box {width:120pxheight:100pxbackground:#0f0}

以上最常用的五种方式，除此之外还有很多方式，根据每个人的习惯不同个人用法不同