1.元素水平居中

1.1 在父元素上使用text-align: center;

father {
    text-align: center;  
}

1.2 margin: 0 auto;

在上一個問題中，我們說過，塊級元素的特性是自動在寬度上填充父元素，有內容的地方自然是內容，而其余的地方使用margin填充。因此我們可以利用左右相等的margin來使元素居中。

<style type="text/css">
        #container {
            height: 100px;
            background: gray;
        }
        #testDiv1{
            height: 100px;
            margin: 0 auto;
            width: 100px;
            background: black;
        }
</style>
<body>
    <div id="container">
        <div id="testDiv1"></div>
    </div>
</body>

1.3 多個塊級元素在一行內居中

眾所周知，行級元素不能設置寬高，只能根據內容決定大小，那么想讓多個塊級矩形居中要怎么做呢？

塊級元素獨占一行，要怎么才能不獨占呢？

可以設置成行內塊級 inline-block，然后父元素給text-align：center

<style type="text/css">
        #container {
            text-align: center;
            height: 100px;
            background: gray;
        }
        .mydiv {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: red;
        }
</style>
<body>
    <div id="container">
        <div class="mydiv"></div>
        <div class="mydiv"></div>
        <div class="mydiv"></div>
    </div>
</body>

1.4 設置距離左邊50%，再用負margin拉回去

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

2.垂直居中

2.1 單行行內元素居中

思路：設置display為inline-block，並給出行高等於元素高度

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: rgb(30, 186, 250);
        }
        /*設置父塊大小及顏色*/

        div a {
            text-decoration: none;
            font-size: 25px;
            color: rgb(254, 7, 183);
            font-weight: 700;
            line-height: 200px;
        }
        /*設置內聯元素的行高等於父塊高度的行高即可實現垂直居中*/
    </style>
</head>

<body>
    <div><a href="#">測試鏈接</a></div>
</body>

2.2 設置距離父元素50%，再用margin拉回去

<!DOCTYPE html>
<html lang="zh">

<head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            height: 95vh;
        }
        .test{
            height: 100px;
            width: 100px;
            background: red;
            position: absolute;
            top: 50%;
            margin-top: -50px;
        }
    </style>
</head>

<body>
    <div style="height: 600px">
        <div class="test">
            
        </div>
    </div>
</body>

</html>

View Code

若想基於視口的垂直居中可將relative換為absolute

2.3 table-cell + vertical-align:middle

設置父元素display為table-cell，並給vertical-align: middle;

3 我最喜歡的方法，flex布局天下第一！

總結：垂直 + 水平居中示例

需求，在頁面最中間顯示一個button。

<!DOCTYPE html>
<html lang="zh">

<head>
    <style>
        body {
            height: 100vh;
            margin: 0;
            padding: 0;
            text-align: center;
        }
        /* button {
            
        } */
        span {
            display: inline-block;
            height: 100vh;
            line-height: 100vh;
        }
        a {
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 5%;
            box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <span>
        <a href="">click me</a>
    </span>
</body>

</html>

View Code

效果：

或者用 flex布局一鍵解決！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css中absolute設置問題和如何讓div居中 css中關於div中文本垂直居中的問題。 CSS中讓元素居中的方法前端基礎問題：CSS居中的幾種方式 CSS 輕松搞定元素(標簽)居中問題 CSS——標簽圖片適配居中問題 CSS關於元素垂直居中的問題 css 文字垂直居中問題 css 關於ul在div里居中且平鋪的問題 CSS中設置div垂直居中