一：通過彈性布局
<
style
>
#container .box
#container
style
>
head
>
<
body
>
<
div
id="container"
>
<
div
class
="box"
>
div>
div>
效果如下：
二、通過絕對定位來水平居中乙個塊級元素，（知道元素寬度，高度）。
<
style
>
#container .box
#container
span
style
>
//這裡通過父元素高度(height)與文字行高（line-height）相等做到的
效果圖：
多行文字的居中
<
div>
<
p>
這是居中的多行文字
這是居中的多行文字
這是居中的多行文字
這是居中的多行文字
<
p>
div>
<
style
>
divp
style
>
//這裡通過為父元素設定display:table，把多行文字用p元素包裹然後運用只對**單元格有效的vertical-align:middle的css規則，就能完美居中
//此效果還可以用它來居中。
效果圖：
css使元素居中的九種辦法
對於行內元素或具有inline block屬性的元素居中，比如span img等可以使用text align center 來實現。css divdiv span 我是span元素span alt 馬超 使用margin auto 來居中是平時布局裡面最常用的了，但是和第一種方法不同的是這種css屬...
css 元素居中
水平居中 1.行內標籤 和行內塊級標籤可以設定 text algin center 2.塊級標籤 margin 0 auto 對浮動元素或絕對定位元素無效 不識別auto。3.浮動的元素 定位加left 50 transform translate 50 0 垂直居中 1.行內標籤 和行內塊級標籤可...
css 元素居中
元素有寬高 未知寬高 水平居中 1.margin 2.text align 3.position absolute和0 4.position absolute和負margin 5.translatex 6.flex 7.table cell 1.translatex 2.flex 3.table c...