html让video元素居中,CSS实现元素居中的五种方法

1.使用text-align水平居中

}.center img{  width: 33%;  height: auto;

}

        

这个属性适合自适应居中，但必须注意的是：居中的元素必须是行内元素。

2.使用absolute定位居中

}.center img{    width: 200px;    height: 200px;    overflow: auto;    position: absolute;    left: 50%;    top: 50%;    margin: -100px 0 0 -100px;

}

        

这种 方案 有非常好的跨浏览器支持。有一个缺点就是必须显式声明外部容器元素的height

3.使用translate居中

}.center img{  position: absolute;  top:50%;  left:50%;  transform: translate(-50%,-50%);  -webkit-transform: translate(-50%,-50%);  width:30%;  height: auto;

}

        

但是有以下几种缺点:

1.CSS transform 在部分就浏览器上需要使用 前缀;

2.不支持 IE9 以下的浏览器;

3.外部容器需