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

超、凢脫俗 2022-06-05 02:19 198阅读 0赞

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

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>

--------------------

## 效果图 ##

![这里写图片描述][SouthEast]

[SouthEast]: /images/20220605/1c29a37e02ec45f4b95fd5f9ff1c6349.png