10种常见的CSS居中方式_css设置head居中-CSDN博客

本文链接：https://blog.csdn.net/weixin_49313767/article/details/110197353

一、对于行内元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            text-align: center;/* 让文字这个行内元素居中 */
        }
    </style>
</head>
<body>
    <div class="one">
        <text>
            居中
        </text>     
    </div>
</body>
</html>

二、对于块级元素—确定宽度类型：
1.margin:0 auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .two{
            width: 80px;
            background-color: #ccc;
            margin: 0 auto;/* 让块级元素居中 */
            text-align: center;/*让文字居中 */
        }
    </style>
</head>
<body>
    <div class="two">
        居中
    </div>
</body>
</html>

2.对于绝对定位的元素-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            position: relative;
        }
        .son{
            position: absolute;
            width: 80px;
            background-color: #ccc;
            left: 50%;
            margin-left: -40px; 
            text-align: center;/*让文字居中 */
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            three
        </div>
    </div>
</body>
</html>

在这里插入图片描述 3.对于绝对定位的元素-2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            position: relative;
        }
        .son{
            position: absolute;
            width: 80px;
            background-color: #ccc;        
            margin: auto;
            right: 0;
            left: 0;
            text-align: center;/*让文字居中 */
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            three
        </div>
    </div>
</body>
</html>

三：对于未知宽度的块级元素
1、display:table;+margin:0 auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .five{
            display: table;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="five">
        five
    </div>
</body>
</html>

2、diplay:inline-block;+text-align:center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            text-align: center;
        }
        .son{
           display: inline-block;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            six
        </div>
    </div>
</body>
</html>

3、position:absolute;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .seven{
         position: absolute;
         left: 50%;
         transform: translateX(-50%); /* 移动元素本身50% */ 
       }
    </style>
</head>
<body>
    <div class="seven">
        seven
    </div>
</body>
</html>

4、display:flex;+align-selt:center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            display: flex;
            flex-direction: column;
        }
        .son{
           align-self: center;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            eight
        </div>
    </div>
</body>
</html>

5、display:flex;+margin: auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            display: flex;
        }
        .son{
           margin: auto;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            ninth
        </div>
    </div>
</body>
</html>

6、width:fit-content;+margin:0 auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .ten{
        width: -moz-fit-content;
        margin: auto;
      }    
    </style>
</head>
<body>
    <div class="ten">
        ten
    </div>
</body>
</html>