CSS中的居中方式
阿新 • • 發佈：2019-02-16
首先是水平居中，最簡單的辦法當然就是
複製程式碼程式碼如下: margin:0 auto;也就是將margin-left和margin-right屬性設定為auto，從而達到水平居中的效果。
那麼其他的辦法呢？容我一一道來：
line-height
首先介紹文字的水平居中方法：
複製程式碼程式碼如下: <div class="wrap">劉放</div>利用line-height設為height的一樣即可：
複製程式碼程式碼如下: .wrap{line-height: 200px;/*垂直居中關鍵*/
text-align:center;
height: 200px;
font-size: 36px;
background-color: #ccc;
}
效果如下：
padding填充
利用padding和background-clip配合實現div的水平垂直居中：
複製程式碼程式碼如下: <div class="parent"><div class="children"></div>
</div>
通過backgroun-clip設定為content-box,將背景裁剪到內容區外沿，再利用padding設為外div減去內div的差的一半，來實現：
?| 1 2 3 4 5 6 7 8 9 10 11 12 |
.parent{
margin:0
auto;
width:200px;
height:200px;
background-color:red;
}
.children
{
width:
100px;
height:
100px;
padding:
50px;
background-color:
black;
background-clip:content-box;/*居中的關鍵*/
|
效果如下：
margin填充
接下來介紹margin填充的方式來實現水平垂直居中。
首先我們還是定義父子div：
<div class="parent">
<div class="children"></div>
</div>
這裡我們利用將子div的margin-top設定為父div高度減去子div高度的一半，然後再通過overflow設定為hidden來觸發父div的BFC，LESS程式碼如下：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@parentWidth:200px;
@childrenWidth:50px;
.parent
{
margin:0
auto;
height:@parentWidth;
width:@parentWidth;
background:
red;
overflow:hidden;/*觸發BFC*/
}
|