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

一、水平居中

行內元素居中：
text-align:center

圖片，單個塊級元素居中：margin-left和margin-right設成auto
margin: 0 auto
或者
display:block
margin：0 auto

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

塊級元素中的行內元素居中：
塊級：text-align:center
行內：display:inline-block

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

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

二，垂直居中

單行行內元素垂直居中：
height：40px
line-heigth:40px

多行元素垂直居中

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

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

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

三，水平垂直居中：

塊級元素水平垂直居中：
父元素：
position: relative；
子元素：
position: absolute;
top: 50%;
left: 50%;
margin-left: -333px;（元素的寬）
margin-top: -200px;（元素的高）
或者
transform來向左向上便宜半個內元素的寬和高
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;

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。