前端-面试题2-div的水平垂直居中

'猫头'工作室

已于 2024-07-13 11:12:32 修改

阅读量234

点赞数 6

文章标签： css css3 前端

于 2024-07-13 11:11:01 首次发布

本文链接：https://blog.csdn.net/weixin_53649241/article/details/140396815

版权

div的水平垂直居中

外边距负值法，定位法子绝父相

div{
    position:absolute;
    height:100px;
    width:100px;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-50px;
}

transform移动法

div{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}

margin:auto

div{
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

display:flex

div{
    display:flex;
    align-items:center;
    justify-content:center;
}

计算父盒子和子盒子之间的距离
利用display：table-cell

<style>
//把父元素转为单元格，子盒子转化为行内块元素，再给父盒子文字居中
    .box {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      width: 400px;
      height: 500px;
      background-color: skyblue;
    }

    .box1 {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>