块级元素水平居中六种方法

时间:2021-11-20 来源:未知网络 作者:996建站网

方法一:利用绝对定位实现元素垂直,水平居中显示:

需要知道元素的宽度和高度。通过设置需要定位的div元素为position: absolute, 然后通过top:50%, left:50%再加上margin-top: 负div高度的一半,margin-left:负div宽度的一半。 
也适用于img ,span等行内元素
        #container{
            position: relative;
            width: 400px;
            height: 300px;
            background-color: #ABC;
        }
        #center{
            position: absolute;
            width: 120px;
            height: 120px;
            top: 50%;
            left: 50%;
            margin-top: -60px;
            margin-left: -60px;
            background-color: #ACC;
        }

块级元素水平居中六种方法插图

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序