水平垂直居中问题

  1. 利用position和margin 实现

    为居中元素的父级添加非static定位

      position: relative;

             为居中元素添加以下样式:

       position: absolute;

       left: 0;

      top: 0;

       right: 0;

       bottom: 0;

       margin: auto;

    (注意:不给居中元素设置高高的话,该元素会与设置非static定位的父级同宽高。)

  

    2.设置弹性布局使子元素居中

    为居中元素的父级设置以下样式:

    width: 400px;

    height: 400px;

    display: flex;

    为居中元素添加以下样式:

    margin: auto;

猜你喜欢

转载自www.cnblogs.com/01angel/p/11691761.html