常用內(nèi)聯(lián)元素：a,img,input,lable,select,span,textarea,font
常用的塊級(jí)元素：div,p,table,form,h1,h2,h3,h4,h5,h6,dl,ol,ul,li

一、水平居中

行內(nèi)元素居中：
text-align:center

圖片，單個(gè)塊級(jí)元素居中：margin-left和margin-right設(shè)成auto
margin: 0 auto
或者
display:block
margin：0 auto

多塊級(jí)元素水平居中
父元素：text-align: center
子元素：display: inline-block;

塊級(jí)元素中的行內(nèi)元素居中：
塊級(jí)：text-align:center
行內(nèi)：display:inline-block

彈性布局(flex)，實(shí)現(xiàn)水平居中
父元素：
display: flex
justify-content: center
align-items:flex-end

塊級(jí)元素水平居中：
父元素：
position: relative；
子元素：
position: absolute;
left: 50%;
margin-left: -333px;（元素的寬）
或者
transform來(lái)向左向上便宜半個(gè)內(nèi)元素的寬
transform: translateX(-50%);

二，垂直居中

單行行內(nèi)元素垂直居中：
height：40px
line-heigth:40px

多行元素垂直居中

1111111　 .center { 　　display: table; 　　width: 100%; } .center_text { 　　display: table-cell; 　　text-align: center; 　　vertical-align: middle; }

flex布局實(shí)現(xiàn)垂直居中
父元素：
display: flex;
flex-direction: column;
justify-content: center;

塊級(jí)元素垂直居中：
父元素：
position: relative;
子元素：
position: absolute;
top: 50%;
transform: translateY(-50%);

三，水平垂直居中：

塊級(jí)元素水平垂直居中：
父元素：
position: relative；
子元素：
position: absolute;
top: 50%;
left: 50%;
margin-left: -333px;（元素的寬）
margin-top: -200px;（元素的高）
或者
transform來(lái)向左向上便宜半個(gè)內(nèi)元素的寬和高
transform: translate(-50%, -50%);

圖片：
.img_wrap{
width:400px;
height:300px;
line-height:300px;
text-align: center;
}
.img_wrap img{
vertical-align:middle;
}

flex布局
父元素：
display: flex;
justify-content: center;
align-items: center;

總結(jié)

以上是生活随笔為你收集整理的CSS行内元素和块级元素的水平居中，垂直居中，水平垂直居中实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。