css:子元素div 上下左右居中方法总结

时间:2023-01-08 10:54:43

情景一:一个浏览器页面中,只有一个div模块,让其上下左右居中

      解决方案:  { position:fixed;

              left:0;

             right:0;

             top:0;

             bottom:0;

             margin:auto; }

      备注:此处小编使用position:fixed为最佳方案,因为position:fixed定位是相对于整个浏览器页面的。

  情景二:一个父元素div,一个已知宽度、高度的子元素div(200*300)

      解决方案: 1、position布局

             {

              position:absolute/fixed;

              top:50%;

              left:50%;

              margin-left:-100px;

              margin-top:-150px;

              }

  情景三:一个父元素div,一个未知宽度、高度的子元素div

      解决方案: 1、position布局,position设为absolute,其他同情景一

            2、display:table

            父级元素:{ display:table;}

            子级元素: { display:table-cell;vertical-align:middle }

            3、flex布局

            父级元素:{ display:flex;flex-direction:row;justify-content:center;align-items:center;}

            子级元素:{flex:1}

           4、translate

            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);