元素水平居中，垂直居中方法

陽光下的冷靜發表於2018-11-25

水平居中

      情景1： 父元素和子元素都是塊級元素，比如兩個都是div，要求子元素處於水平居中

      設定：都只需要在子元素的樣式中新增程式碼：

     方法<1>

margin: 0 auto;

   方法<2>

   position: relative;
   margin: auto;
   left: 0;
   right: 0;

     情景2：父元素是塊級元素，子元素是行內元素，比如一個是div，一個是button，要求button是水平居中

     設定：在父級元素的樣式中新增程式碼：

text-align: center;

    情景3：父元素和子元素都是行內元素，比如父是span，子是a，要求a是水平居中

    設定：由於行內元素是不能設定高和寬的，所以首先得把父元素轉換成塊級元素，然後才能設定高寬，這就變成了情景2了，

     所以設定跟情景2的一樣，程式碼如下：


display: block;
height: 100px;
width: 100px;
text-align: center;
background: green;

 垂直居中

 情景1：父元素是塊級元素，子元素是行內元素，比如一個是div，一個是button，要求button是垂直居中

 設定：在父級元素樣式中設定line-heifht的高度，值與父元素設定的高度一樣，程式碼如下：

width: 200px;
height: 200px;
background: purple;	
line-height: 200px;

 情景2:父元素和子元素都是塊級元素，比如兩個都是div，要求子元素處於垂直居中

 設定：給父級元素設定display和vertical-align，設定的具體值如下程式碼(該種方法對情景1也有效)：

display: table-cell;
vertical-align: middle;

如果想要某個元素同時滿足水平居中和垂直居中可以混合使用以上的方法或者其他的計算方法。

浮動元素水平居中

對於一個沒有浮動的元素，我們通常可以通過對其設定 margin:0 auto; 來實現元素的居中，但是這個方法對於浮動元素卻失去了作用，其實我們可以理解的是，在脫離文件流後，浮動的力量其實就是auto的力量，所以他它會自動向左浮動。

所以對於一個浮動元素居中做法：

首先給此元素設定一個寬度值，先設定它的 margin-left:50% ，這個時候元素的左邊緣正好位於其父元素的中央，然後設定其position:relative;           left:負本元素寬度的一半，這樣的目的是將本元素向左移動其寬度的一半，這個時候可保證本元素的中間點位於父元素的中央。

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="utf-8" />
　　<title>元素居中問題</title>
<style type="text/css">
#main{
　　width: 70%;
　　background-color: #666;
　　overflow: hidden;
}
#div1{
　　width:30%;
　　height: 200px;
　　float: left;
　　background-color: blue;
　　margin-left:50%; 
　　position:relative; 
   left:-15%;
}
</style>
</head>
<body>
<div id="main">
　　<div id="div1">
　　　　<p>居中吧！div！</p>
　　</div>
</div>
</body>
</html>

浮動元素垂直居中

核心程式碼: vertical-align: middle;display: table-cell;

程式碼如下：

<style type="text/css">
    #demo {
        width: 300px;
        height: 200px;
        background-color: grey;

        display: table-cell;
        vertical-align: middle;
    }
        .fl {

            float: left;
            width: 50px;
            height: 50px;
            background-color: black;

        }
    </style>



<body>
    <div id="demo">
        <div class="fl"></div>
    </div>
</body>

絕對定位元素水平垂直居中

left：50%，然後往左走自己盒子的一半(margin-left)

top:50%,然後往上走自己盒子的一半(margin-top)

 

 

相關文章