首頁 > web前端 > html教學 > 常用CSS居中 - Moustache

常用CSS居中 - Moustache

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2016-05-20 13:46:45
原創
1120 人瀏覽過

1.flex方法:

.center_fix
{ 
display:flex; 
align-items:center;
justify-content: center;
}
登入後複製

具体flex方法教程:可以参见软老师的——》Flex 布局教程:实例篇

2.position:absolute

.center
{

position: absolute;

top:50%; left:50%;

width: 100px;

height:100px;

margin-top: -50px;

margin-left:-50px;

background: teal;

}
登入後複製

3.position: fixed;和上一个absolute方法差不多

.center{
position: absolute;
top:50%;
left:50%;
width: 100px;
height:100px;
margin-top: -50px;
margin-left:-50px;
background: teal;
} 
登入後複製

4.

.center{
position: fixed;
width: 100px;
height: 100px;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
background: teal; 
}
登入後複製


5.

.center{
position: absolute;
width: 100px;
height: 100px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: teal;
}  
登入後複製

6.CSS3盒模型display:-webkit-box

.center{
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
width:100px;
height:100px;
background:teal;
color:black;
} 
登入後複製


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
無法使用 CSS + HTML 使文字居中
來自於 1970-01-01 08:00:00
0
0
0
css3 - flex兩端佈局
來自於 1970-01-01 08:00:00
0
0
0
使用 place-content: center 的全寬 CSS 網格項
來自於 1970-01-01 08:00:00
0
0
0
為什麼div不居中
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板