水平垂直居中方法

ゝ一纸荒年。 2023-06-06 10:57 5阅读 0赞

1.  flex布局

#father { 
               width: 100px;
               height: 100px;
               display: flex;
               align-items: center;
               justify-content: center;
               background-color: hotpink;
           }
           
           #son { 
               width: 20px;
               height: 20px;
               background-color: ivory;
           }

1.  绝对定位

//1.transform #father { 
                width: 100px;
                height: 100px;
                position: relative;
                background-color: hotpink;
            }
            
            #son { 
                width: 20px;
                height: 20px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                background-color: ivory;
            }
    //2.margin负值 #father { 
                width: 100px;
                height: 100px;
                position: relative;
                background-color: hotpink;
            }
            
            #son { 
                width: 20px;
                height: 20px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -10px;
                margin-top: -10px;
                background-color: ivory;
            } 
     
     //3.top left right bottom都为0 margin:auto #father { 
                width: 100px;
                height: 100px;
                position: relative;
                background-color: hotpink;
            }
            
            #son { 
                width: 20px;
                height: 20px;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                background-color: ivory;
            }

1.  table-cell

<div id="father">
            <p>我居中了哦</p>
        </div>

#father { 
                width: 200px;
                height: 200px;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                background-color: khaki;
            }

4.calc动态计算

#father { 
                position: relative;
                width: 400px;
                height: 160px;
                background-color: lawngreen;
            }
            
            #son { 
                position: absolute;
                width: 200px;
                height: 50px;
                background-color: khaki;
                left: -webkit-calc((400px - 200px)/2);
                top: -webkit-calc((160px - 50px)/2);
                left: -moz-calc((400px - 200px)/2);
                top: -moz-calc((160px - 50px)/2);
                left: calc((400px - 200px)/2);