CSS/html各种div 等元素居中的几种方法

元素居中这个样式真是有相当多的页面都在使用,在这里,跟大家分享几种好用的居中方法

1、 控制margin - - - - - -margin:0 auto;
#d1{
    width:500px;
    height:300px;
    margin:0 auto;
}

!注意,这个要求居中元素必须是块级元素,且必须设置宽,否则无效;

2、利用text-align - - - - - -text-align: center; (推荐)

#d2{
    text-align: center;
    }

#d2>div{
        display: inline-block;
        width:300px;
        height:100px;
        background: #aff;
    }

!注意,这个设定是要居中的元素为行内块元素,只需要加一个父元素并给其设置文字居中即可,这个相对万能一些,而且没有兼容性问题,个人也最喜欢用这个;

3、CSS3 过渡属性 transform - - - - - -transform: translate(-50%);

CSS3 位移
#d3{
        position: fixed;
        top:30%;
        left:50%;
        transform: translate(-50%);
        width:300px;
        height:100px;
        background: #B948FF;
    }
    元素先向左移动父元素宽的50%,后以自身为主,沿X轴向右移动自身的宽度的50%,正好居中
    (IE 10 以下不支持此属性)

实用代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素居中</title>
    <style>
        #d1{
            width:300px;
            height:100px;
            background: #f0f;
            margin:20px auto;
        }

        #d2{
            text-align: center;
        }

        #d2>div{
            display: inline-block;
            width:300px;
            height:100px;
            background: #aff;
        }

        #d3{
            position: fixed;
            top:60%;
            left:50%;
            transform: translate(-50%);
            width:300px;
            height:100px;
            background: #B948FF;
        }

        #d4{
            width: 800px;
            height:200px;
            border: 2px solid #000;
        }

        #d4>div{
            position: relative;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width:300px;
            height:100px;
            background: #FFC615;
        }
    </style>


</head>
<body>

    <div id="d1"></div>
    <div id="d2">
        <div></div>
    </div>

    <div id="d3"></div>

    <div id="d4" style="">
        <div></div>
    </div>

</body>
</html>

效果图

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值