使一個div垂直+水平居中的幾種方法

時間 2019-11-09

標籤一個 div 垂直水平居中幾種方法欄目 CSS 简体版

原文原文鏈接

前幾天去一家互聯網公司面試，面試官問到了這個應該算是比較簡單的問題，在我自認爲回答正確時，才知道這道題的答案有不少種，下面就讓咱們一塊兒來探討一下這個問題：css

思路1：絕對定位居中（原始版）

這個是我回答出來的，也是被各位所熟知的一種方法，設外層div相對定位，內層div絕對定位，top、left分別設爲50%，而後經過設置margin-top、margin-left值爲寬度的負數就能夠成功實現垂直水平居中了：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
*{margin: 0;padding:0;}
.outer{
width: 80%;
height: 400px;
background: #ccc;
margin: 0 auto;
position: relative;
}
.inner{
width: 400px;
height: 300px;
background: green;
position: absolute;
top: 50%;left: 50%;
margin-top: -150px;/*設爲高度的1/2*/
margin-left: -200px;/*設爲寬度的1/2*/
}
</style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

很常見的，這個經典的方法最大的不足之處是inner的寬度必須是固定值，不然margin-top和margin-left的值將沒法設置，爲了解決這個問題，咱們考慮將使inner發生位移的代碼由margin-top、margin-left換成其餘形式，換成什麼呢？請看第二種方法：css3

思路2：絕對定位居中（改進版之一）

咱們的目的是讓inner在top和left方向發生50%偏移以後，再往回偏移必定距離，而css裏關於位置偏移的屬性還有什麼呢？當咱們查閱最新版的css3屬性以後，發現這樣一個屬性：selector{transform：translate();},translate表明着水平、垂直方向上的轉換（位移），其中當括號內的值設爲百分比時，將以元素自身寬度爲基準，移位相應的寬度，這樣一來，咱們的問題就獲得瞭解決：面試

<style type="text/css">
*{margin: 0;padding:0;}
.outer{
width: 80%;
height: 400px;
background: #ccc;
margin: 0 auto;
position: relative;
}
.inner{
width: 70%;
height: 300px;
background: green;
position: absolute;
top: 50%;left: 50%;
transform: translate(-50%,-50%);/*在水平和垂直方向上各偏移-50%*/
}
</style>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

這個方法妥善解決了內層div寬度不肯定的問題，但因爲使用了css3的新屬性，在低版本ie瀏覽器下是不兼容的。由此，咱們想到了第三種方法：瀏覽器

思路3：絕對定位居中（改進版之二）

<style type="text/css">
*{margin: 0;padding:0;}
.outer{
width: 80%;
height: 400px;
background: #ccc;
margin: 0 auto;
position: relative;
}
.inner{
width:70%;
height: 300px;
background: green;
position: absolute;
top: 0;left:0;right:0;bottom:0;/*讓四個定位屬性都爲0*/
margin:auto;/*很關鍵的一步*/
}
</style>

這個方法，不只能在inner寬度不肯定時發揮做用，還能兼容各類主流瀏覽器，看上去彷佛很完美，但事實上，當咱們的需求改成：寬度隨內部文字自適應，即寬度未設置時，這種方法就沒法知足需求了，緣由是left、right設爲0後，inner在寬度未設置時將佔滿父元素的寬度。wordpress

（你能夠在思路二的基礎上將inner寬度去掉，內部放一些文字，你會發如今第二種思路下這種需求是能夠知足的）佈局

思路4：flex佈局居中

flex佈局是移動端一種很新潮的佈局方法，利用flex佈局使元素垂直水平居中，缺點依然是使人頭疼的兼容性問題（在ie11-中不起做用），優勢是代碼量比前幾種方法相比略少，方便使用。
讓咱們一塊兒來了解一下：flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
*{margin: 0;padding:0;}
.outer{width: 80%;height: 400px;background: #ccc;margin:0 auto;
display: flex;/*設置外層盒子display爲flex*/
justify-content:center;/*設置內層盒子的水平居中*/
align-items:center;/*設置內層盒子的垂直居中*/
}
.inner{display: inline-block;height: 300px;background: yellow;}
</style>
</head>
<body>
    <div class="outer">
        <div class="inner">這是一段文字這是一段文字這是一段文字</div>
    </div>
</body>
</html>

以上就是使div垂直+水平居中的四種方式，關於第三種思路中inner沒法對內容自適應的問題，目前我尚未想出解決辦法，但願高人們可以指點一二。code

參考文章:小tip: margin:auto實現絕對定位元素的水平垂直居中--來自張鑫旭-鑫空間-鑫生活orm