用css實現垂直水平置中的幾種方法

最後更新：2018-07-25 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1.用inline-block和vertical-align來實現置中：這種方法適合於未知寬度高度的情況下。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #container{            text-align: center;            height: 400px;            background: #4dc71f;        }        #container:before{            content: "";            height: 100%;            display: inline-block;            vertical-align: middle;            margin-right: -0.25em;        }        #center-div{            display: inline-block;            vertical-align: middle;            background: #2aabd2;        }    </style></head><body>    <div id="container">        <div id="center-div">            xxx        </div>    </div></body>

參考：https://css-tricks.com/centering-in-the-unknown/
2.用相對絕對位置和負邊距實現上下左右置中：高度和寬度已知

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>test</title>    <style>        .div2{            height: 600px;            width: 600px;            position: relative;            border: 2px solid #000;        }        .img2{            height: 200px;            width: 200px;            position: relative;            top: 50%;            left: 50%;            margin: -100px 0 0 -100px;        }    </style></head><body>        <div class="div2">            <img class="img2" src="images/hongbao.png">        </div></body></html>

其實第二種要理解不能，首先相對父元素top，left定位在50%的位置，這時候只是圖片左上方置中，而中心點還沒置中，加上margin: -100px 0 0 -100px;利用負邊距把圖片的中心點位於父元素的中心點，從而實現垂直水平置中
3.利用絕對位置來實現置中：適合高度，寬度已知的情況。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #container{            text-align: center;            height: 400px;            background: #4dc71f;            position: relative;        }        #center-div{            position: absolute;            margin: auto;            top: 0;            right: 0;            left:0;            bottom: 0;            width: 200px;            height: 200px;            background: #2b669a;        }    </style></head><body>    <div id="container">        <div id="center-div">            xxx        </div>    </div></body></html>

4.使用table-cell，inline-block實現水平垂直置中：適合高度寬度未知的情況

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #container{            display: table-cell;            text-align: center;            vertical-align: middle;            height: 300px;            background: #ccc;        }        #center-div{            display: inline-block;        }    </style></head><body>    <div id="container">        <div id="center-div">            xxx        </div>    </div></body></html>

5.使用css3中的transform來時實現水平垂直置中：適合高度寬度未知的情況

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #container{         position: relative;            height: 200px;            background: #333;        }        #center-div{            position: absolute;            top:50%;            left: 50%;            transform: translate(-50%,-50%);        }    </style></head><body>    <div id="container">        <div id="center-div">            xxx        </div>    </div></body></html>

還可以使用Flexbox來實現水平垂直置中；適合寬度高度未知情況，但是要注意相容性

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #p_2{            display: flex;            justify-content: center;            align-items: center;            width: 200px;            height: 200px;            background: #009f95;        }    </style></head><body>    <div id="p_2">        <div id="c_2">            xxxxxxx        </div>    </div></body></html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More