Front-end-learning-to-organize-notes 实现一个垂直水平居中

Jan 12 '21 07:01 Chocolate1999

掌握盒子水平垂直居中的五大方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            height: 100%;
            overflow: hidden;
        }
        .box{
            box-sizing: border-box;
            width: 100px;
            height: 50px;
            line-height: 48px;
            text-align: center;
            font-size: 16px;
            border: 1px solid lightblue;
            background: lightblue;   
        }
        /*定位1  需要考虑父级宽高且需计算*/
        body{
            position: relative;
        }
        .box{
            position: absolute;
            top:50%;
            left:50%;
            margin-left: -50px;
            margin-top: -25px;
        }
        /*定位2 不需要考虑父级宽高 但得有宽高
        body{
            position: relative;
        }
        .box{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
        */
        /*定位3 CSS3中使用transform不需要计算 也不需要父级宽高
            但兼容性不是很好
        body{
            position: relative;
        }
        .box{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }*/


        /*display:flex   主轴和交叉轴都居中（即x和y轴） 但也需要考虑兼容性*/
        /*移动端常用做法*/
        /*body{
            display: flex;
            justify-content: center; 
            align-items: center;
        }*/

        /*通过javaScript来实现（使用需将下面body中js代码取消注释）*/
        /*body{
            position: relative;
        }*/

        /*使用display:table-cell 这种方法本身是用来控制文本的
        而且要求父级必须有固定宽高 百分比不算固定值 使用比较少（了解即可）
        */
        /*
        body{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: 500px;
            height: 500px;
        }
        .box{
            display: inline-block;
            
        }*/
        


    </style>
</head>
<body>
    <div class="box" id="box">
        居中显示
    </div>
    <!--通过javaScript来实现-->
    <script>
        /*let HTML=document.documentElement,
            winW=HTML.clientWidth,
            winH=HTML.clientHeight,
            boxW=box.offsetWidth,
            boxH=box.offsetHeight;
        box.style.position="absolute";
        box.style.left=(winW-boxW)/2+'px';
        box.style.top=(winH-boxH)/2+'px';*/
    </script>
</body>
</html>

Jan 29 '21 03:01 Chocolate1999

垂直水平居中

行内元素

.parent {
   height: 高度; 
   text-align: center;
}
.son {
    line-height: 高度;
}

flex布局

.parent {
    display: flex;
    align-items: center;
    justify-content: center;
}
//或者设置父flex ，子 margin: auto;

table

.parent {
  display: table;
  text-align: center;
}
.son {
  display: table-cell;
  vertical-align: middle;
}

绝对定位定宽定高

.son {
 position: absolute;
    top: 50%;
    height: 高度;
    margin-top: -0.5高度;
    width: 宽度;
    left: 50%;
    margin-left: -0.5*宽度
}

transform绝对定位不定宽不定高

.son {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 50%;
    transform: translate( 0, -50%);
}

left/right: 0 top/bottom: 0;

.son {
    position: absolute;
    width: 宽度;
    left: 0;
    right: 0;
    margin: 0 auto;

    height: 高度;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

Jan 29 '21 03:01 HearLing

Front-end-learning-to-organize-notes Front-end-learning-to-organize-notes copied to clipboard

实现一个垂直水平居中

Front-end-learning-to-organize-notes
Front-end-learning-to-organize-notes copied to clipboard