CSS設定行內元素和區塊層級元素的水平置中、垂直置中，css置中

CSS設定行內元素和區塊層級元素的水平置中、垂直置中，css置中

CSS設定行內元素的水平置中

1. div{text-align:center} /*DIV內的行內元素均會水平置中*/ 

 

CSS設定行內元素的垂直置中

1. div{height:30px; line-height:30px} /*DIV內的行內元素均會垂直置中*/ 

 

PS:當然，如果既要水平置中又要垂直置中，那麼綜合一下

1. div{text-align:center; height:30px; line-height:30px} 

 

CSS設定區塊層級元素的水平置中

1. div p{margin:0 auto; width:500px} /*區塊層級元素p一定要設定寬度，
2. 才能相當於DIV父容器水平置中*/ 

 

CSS設定區塊層級元素的垂直置中

1. div{width:500px} /*DIV父容器設定寬度*/ 
2. div p{margin:0 aut0; height:30px; line-height:30px} /*區塊層級元素p也可以加個寬度，
3. 以達到相對於DIV父容器的水平置中效果*/ 

說明：在以後的實際項目中，區塊層級元素的垂直置中布局方式可能會碰到比這個更複雜，請關注以後的相關文章！

 

什麼叫行內元素？

常見的span、a、lable、strong、b等html標籤都是行內元素

預設情況下，行內元素均無法設定寬度、高度、上下方向margin的外邊距等

當然，這不是絕對的，通過CSS可以讓任何行內元素變成區塊層級元素！比如：

1. span{display:block} /*span這時設定成了區塊層級元素*/ 

 

什麼叫區塊層級元素？

常見的div、p、li、h1、h2、h3、h4等html標籤都是區塊層級元素

當然，這也不是絕對的，通過CSS可以讓任何區塊層級元素變成行內元素！比如：

1. h1{display:inline} /*h1這時設定成了行內元素*/ 

 

總結：

前端初學者理解行內元素和區塊層級元素的概念很重要，這對切圖div+css布局很有協助！如有疑問，歡迎底下留言！

尊重智慧財產權，文章轉載請註明來源：益享天開 >> CSS設定行內元素和區塊層級元素的水平置中、垂直置中