使用 CSS 實現內容上下左右居中是在開發過程中常常需要用到的技巧,特別是在響應式布局設計中更是如此。本文將會分享與大家關于 CSS 實現內容上下左右居中的幾種方法。
對于 CSS 實現內容居中,我們首先需要明確的是,所謂居中不僅僅是垂直與水平的居中,還包括在元素內部的居中。這三種居中方法將分別在下面進行介紹:
## 水平居中
我們通常使用以下兩種方式來實現水平居中:
### text-align 屬性
通過設置 text-align 屬性可以將內部元素的文本水平居中。如下所示:
p { text-align: center; }### margin 屬性 我們可以使用 margin 屬性來設置一個寬度固定的塊級元素的左右 margin 值為 auto,將其自身水平居中。如下所示:
.center-block { width: 200px; margin: 0 auto; }## 垂直居中 以下這些方法可用于實現垂直居中: ### 使用 line-height 屬性 可以通過為元素應用一個等于其高度的 line-height 屬性的值來垂直居中行內元素。如下所示:
.wrap { height: 200px; line-height: 200px; text-align: center; } .wrap p { display: inline-block; vertical-align: middle; }### 使用 flexbox 布局 使用 display: flex 屬性和 align-items 屬性可以很容易地將內部元素垂直居中。如下所示:
.wrap { height: 200px; display: flex; justify-content: center; align-items: center; } .wrap p { /* additional styles */ }## 內容居中 以下這些方法可以實現將內部元素垂直與水平居中: ### 使用 absolute 定位 可以使用絕對定位來使元素實現內容居中。如下所示:
.wrap { position: relative; } .wrap p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }### 使用 flexbox 使用 display: flex 和 justify-content、align-items 屬性可以非常輕松地實現內容居中。如下所示:
.wrap { display: flex; justify-content: center; align-items: center; }總結 本文介紹了幾種使用 CSS 實現內容上下左右居中的方法:使用 text-align、margin、line-height 屬性和 flexbox 布局;使用 absolute 定位和 flexbox 布局來實現內容居中。這些方法可以為您在應用開發過程中提供技術支持,使您能夠以最佳方式在設計中實現內容的居中。
上一篇css內外邊距上下左右
下一篇css內容居頂部