網站設計制作：頁面中如何通過css讓元素水平居中

作者：管理員來源：互聯網發布時間：2025-09-16 09:28:13 點擊數：0

在網站設計制作過程中，讓元素水平居中是常見的需求。根據不同的情況（如行內元素、塊級元素、多個塊級元素等），可以采用不同的方法。

1:行內元素,適用于行內元素或行內塊元素, 方法：text-align

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
    .parent {
        text-align: center;
    }
</style>
</head>
<body>
 <div class="parent">
  <span>123</span>
 </div>
</body>
</html>

2:塊級元素，適用于有明確寬度的塊級元素，方法: margin auto

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            background: skyblue;
            width:200px;
            height:200px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div  class="box">123</div>
</body>
</html>

注意：元素必須設置寬度，且不能設置為float或absolute定位

3：Flexbox 方法現代布局方法，靈活且強大

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent {
            display: flex;
            justify-content: center;
        }
        .son{
            float: left;
            background: pink;
            width:50px;
            height:50px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div  class="son">

        </div>
    </div>
</body>
</html>

4:Grid 方法在 CSS 中，使用 Grid 布局可以輕松實現元素的水平居中。

使用 justify-content 和 align-content ，如果需要控制整個網格內容的對齊，可以使用 justify-content 和 align-content。

.parent {
  display: grid;
  justify-content: center; /* 或者使用 place-items: center; 來同時實現水平和垂直居中 */}

5：使用CSS3 新增的 transform方法.

transform: translate(x,y) | 根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent {

        }
        .son{
            float: left;
            background: pink;
            width:50px;
            height:50px;

            position: absolute;
            left: 50%;
            transform: translate(-50%, 0);
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son">

        </div>
    </div>
</body>
</html>

方法6：left: 50%

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent {

        }
        .son{
            float: left;
            background: pink;
            width:50px;
            height:50px;

            position: absolute;
            left: 50%;
            /*負的一半width*/
            margin-left: -25px; 
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son">

        </div>
    </div>
</body>
</html>

方法7：left: 0; right: 0

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent {

        }
        .son{
            float: left;
            background: pink;
            width:50px;
            height:50px;

            position: absolute;
            left:0;
            right:0;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son">

        </div>
    </div>
</body>
</html>

關鍵字： css 網站設計制作水平居中

上一篇：PHP文件上傳大小限制的設置