css中各种情况下的元素的垂直和水平居中的问题

时间：2021-11-29 10:53:32

问题:外边是一个容器，容器中还有一个容器，那么请问怎么让里边的容器垂直水平居中显示？？

No1: 外边的容器宽度和高度确认，里边是行内元素

.container{width:200px; height:100px; line-height:100px;}

//外边的容器的css设置和命名  这样就ok了

  No2:里边的容器是img元素

.container{width:200px; height:100px; line-height:100px; vertical-align:middle; }

.wrap{vertical-align:middle;}//图片的命名和css代码

    No3：就是里边的元素是div元素

.cantainer{width: 300px; height: 150px; background: blue; text-align: center; vertical-align:middle; display: table-cell;}

//添加display属性（好好看看这个属性哦）

.wrap{margin:auto; width:100px;}

No4：宽高固定的div在浏览器中水平/垂直居中

absolute将元素脱离文档流，通过“left: 50%; top: 50%;”和“margin-left: -width/2; margin-top: -height/2;”来实现；

.div1{

    background: red;width: 200px;height: 200px;position:absolute;

    top:50%;left:50%;

    margin-left:-100px;

    margin-top:-100px; 

}

其实可以用js来计算里边容器的宽度和高度然后定位（涉及到js了 咳咳 以后再谈吧）

相关文章