由於最近用到css居中應用，網上資料過多，然後關於居中的技巧有很多，就先總結下方便後續忘記了，好回憶檢視。
行內元素**
1. 詳情見：2. 該方法適用於 inline、inline-block、inline-table、inline-flex 之類的元素。塊級元素
width="800" height="265" scrolling="no" title="css-block-line-center-one" src="" allowfullscreen="true">see the pen
css-block-line-center-one by sally (
@sally-hzy) on
codepen.
2.不用父元素或元素如何，只要指定了寬度，該方法都適用
3.但是對浮動（float）的元素沒有，可以嘗試用另一種
width="800" height="265" scrolling="no" title="css-block-line-center-float" src="" allowfullscreen="true">see the pen
css-block-line-center-float by sally (
@sally-hzy) on
codepen.行內元素
width="800" height="265" scrolling="no" title="css-block-height-block-two" src="" allowfullscreen="true">see the pen
css-block-height-block-two by sally (
@sally-hzy) on
codepen.
3.直接用flex布局的方式實現width="800" height="265" scrolling="no" title="css-block-height-block-three" src="" allowfullscreen="true">see the pen
css-block-height-block-three by sally (
@sally-hzy) on
codepen.
垂直水平居中
元素高度與寬度已知
將元素相對於其父元素的寬度/高度值向右並向下移動一半的距離，這時元素左上角的頂點剛好位於父元素的中心。然後再通過設定負邊距值的方法，將元素相對於其自身的寬度/高度值向左並向上移動一半的距離，就可實現水平垂直均居中的效果了。並且這種方法的瀏覽器相容性是很好的。
width="800" height="265" scrolling="no" title="css-block-center-one" src="" allowfullscreen="true">see the pen
css-block-center-one by sally (
@sally-hzy) on
codepen.
元素寬度或高度未知
- 如果元素的寬度或者高度未知，則在將元素相對于父元素的寬高往向右並向下移動一半距離後，再用 transform
屬性來將其向左並向上移動自身寬度及高度值一般的距離即可。
width="800" height="265" scrolling="no" title="css-block-center-two" src="" allowfullscreen="true">see the pen
css-block-center-two by sally (
@sally-hzy) on
codepen.
或者
.parent
.child
width="800" height="265" scrolling="no" title="css-block-center-four" src="" allowfullscreen="true">see the pen css-block-center-four by sally (@sally-hzy) on codepen.
參考文章：
CSS居中問題整理
給出基本布置 及效果圖 html gfather father class child test 文字span div div hahahaha div div hahahaha div body css 效果如圖 我們考慮id gfather的div和id father的div。藍色和紫色的方框 ...
css垂直水平居中的整理
demo1 demo1 img 注意 如果不能居中，在img前面加乙個空格。demo2 demo2 img demo3 demo3 inner demo3 inner img demo3 demo3 inner demo3 demo3 inner img 如果是文字,需要新增一標籤來實現，我這裡新增...
css 垂直居中方法整理
知道vertical align屬性吧，css中用來設定垂直居中的。但它只針對有vertical特性的元素，像 而這些要用垂直居中的時候只能另外找方法了。一 單行在確定的容器中垂直居中 div 二 多行文字在不確定容器中垂直居中 div 三 多行文字在確定容器中垂直居中 一大段文字 未知高度 要在已...