在css中最常用的就是居中對齊的樣式，flex布局方法使得垂直水平居中變得非常容易，但是flex具有瀏覽器相容問題，掌握其他css居中對齊的方法也是重要的。
其中，水平居中較為簡單，通過判斷元素是行內元素還是塊級元素就能輕鬆區分：
行內或類行內元素：text-align: center;而垂直居中具有一定的難度，也有很多種方法；只要學好了垂直居中的幾種方法，與水平居中輕鬆組合就能得出垂直水平居中的方案。塊級元素：margin: 0 auto;
適用於單行文字，不能應用於多行文字
設定子元素的line-height，用子元素的line-height撐開父元素
"parent"
>
"child"
>
text herediv
>
div>
#child
"parent"
>
src=
"image.png"
alt="
" />
div>
#parent
#parent img
"parent"
>
"child"
>
content herediv
>
div>
#parent
#child
"parent"
>
"child"
>
content herediv
>
div>
#parent
#child
"parent"
>
"child"
>
content herediv
>
div>
.parent
.child
"parent"
>
"child"
>
content herediv
>
div>
#parent
#child
垂直居中的幾種方法總結
通過將父元素的display設定為flex,並將子元素的margin設定為auto即可實現，不過這種方法有些相容問題 如下 outer inner這種方式不需要首先知道子元素的寬高，會根據內容自適應，還是很方便的。設定父元素的position為relative,子元素的position為absolu...
css垂直居中的幾種方法
1.lineheight方法 html class container id div1 src test.png 一行文字span div css container div1 div1 img效果 說明 設定了lineheight和容器高度相同，vertical align middle 需要知道...
文字垂直居中的幾種方法
3 如果上面的 都不生效的話，有可能行內元素是在 裡面，這個時候可以利用inline元素的 css 屬性 vertical align 預設是 baseline 屬性，將其設定為 middle，這個屬性常用於 inline level 和 table cell 的元素。水平垂直居中 拓展 在垂直居中...