css屬性 -- 水平居中：text-aligin:center; 垂直居中： line-height:height; 例子:、
html：
<div
class
="mb10 line-align"
>
我是垂直水平居中對齊的文字哦！
div>
<
div
class
="mb10 line-align"
>
<
span
>我是垂直水平居中對齊的內聯元素span！
span
>
div>
css：
.mb10/*文字或者內聯元素的垂直水平居中對齊
*/.line-align
1) 定位法
優點：方便理解。一目了然。
缺點：子元素必須固定寬高才可以使用。
html：
<div
class
="relativediv"
>
<
div
class
="absolutediv"
>
div>
div>
css：
/*定位法*/
.relativediv .absolutediv
2) css3 transform結合position方法
優點：相比完全的定位法，這個方法中，子元素不比固定寬高。
缺點：相容性不是很好，ie9+的瀏覽器才支援。
html：
<div
class
="transform"
>
<
div
class
="transformchild"
>
div>
div>
css：
/*css3 transform
*/.transform.transformchild
1) td中放span或者文字
html:
<div
class
="mb10 displaytable"
>
<
div
class
="displaytablecell"
>
<
span
>我相當於是td中的span
span
>
div>
div>
2) td中放div
html:
<div
class
="mb10 displaytable"
>
<
div
class
="displaytablecell"
>
<
div
class
="tablediv"
>我相當於是td中的div
div>
div>
div>
css:
.displaytable.displaytablecell.tablediv
的水平處置居中都可以使用上面的方式，不過還有個超級好用的方式，padding+偽類方法。
缺點：只支援ie9+
例子：html：
<div
class
="imggroup"
>
<
div
class
="imgalone"
>
<
div
class
="imgwidth"
>
<
img
src="image/1.png"
>
div>
div>
<
div
class
="imgalone"
>
<
div
class
="imgwidth"
>
<
img
src="image/2.png"
>
div>
div>
<
div
class
="imgalone"
>
<
div
class
="imgwidth"
>
<
img
src="image/1.png"
>
div>
div>
<
div
class
="imgalone"
>
<
div
class
="imgwidth"
>
<
img
src="image/2.png"
>
div>
div>
<
div
class
="imgalone"
>
<
div
class
="imgwidth"
>
<
img
src="image/1.png"
>
div>
div>
<
div
class
="imgalone"
>
<
div
class
="imgwidth"
>
<
img
src="image/2.png"
>
div>
div>
div>
css：
示例效果檢視
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...
css水平居中 垂直居中 水平垂直居中
css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...
CSS水平垂直居中方式
1.grid布局實現 一 father 2.grid布局實現 二 father 3.grid配合margin實現 father son 4.flex布局實現 father 5.flex配合margin實現 father son 6.使用display table cell實現 father son ...