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

最新推荐文章于 2024-04-12 11:37:26 发布

freedom_文

最新推荐文章于 2024-04-12 11:37:26 发布

阅读量1.8k

点赞数

文章标签： html5 css居中元素居中 CSS3位移 html居中

本文链接：https://blog.csdn.net/freedomVenly/article/details/78537768

版权

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

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>