對於行內元素或具有inline-block屬性的元素居中，比如span、img等可以使用text-align: center;來實現。
/*css*/
divdiv span
我是span元素span>
alt="馬超"
使用margin: auto；來居中是平時布局裡面最常用的了，但是和第一種方法不同的是這種css屬性作用於本身元素，且必須給元素設定了寬度和具有display：block；的塊級元素。
/*css*/
divdiv span
我是span元素span>
這種方法好處是行內元素和塊級元素都適用,但是需要知道元素本身的寬度
/*css*/
divdiv span
我是span元素span>
這種方法好處是行內元素和塊級元素都適用,但是需要知道元素本身的寬度。
/*css*/
divdiv span
我是span元素span>
/*css*/
divdiv span
我是span元素span>
calc是英文單詞calculate(計算)的縮寫，是css3的乙個新增的功能，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設定動態值。
calc使元素居中的原理和負margin是一樣的，calc 允許你基於當前的頁面布局計算尺寸。在上面的簡單計算中， 50% 是容器元素的中心點，但是如果只設定50%會使的左上角對齊div的中心位置。 我們需要把向左和向上各移動寬高的一半。計算公式為：
top: calc(50% - (40% / 2));
left: calc(50% - (40% / 2));
/*css*/
divdiv span
我是span元素span>
這種方法實現原理和第五種是一樣的，就是用css3的屬性translate來達到和負margin一樣的作用。translate是transform的乙個值，在這裡作用是定義2d轉換。但是在ie9以下不支援。
/*css*/
divdiv span
我是span元素span>
使用flex居中不需要知道元素本身寬高以及元素的屬性。
/*css*/
divdiv span
我是span元素span>
使用 display: table-cell, 而不是使用table標籤; 可以實現水平居中和垂直居中，但是這種方法需要新增額外的元素作為外部容器。
/*css*/
.center-aligned
.center-core
span
class="center-aligned">
class="center-core">
我是span元素span>
div>
css 元素居中各種辦法
一 通過彈性布局 style container box container style head body div id container div class box div div 效果如下 二 通過絕對定位來水平居中乙個塊級元素，知道元素寬度，高度 style container box c...
CSS 元素垂直居中的 6種方法
利用css進行元素的水平居中，比較簡單，行級元素設定其父元素的text align center，塊級元素設定其本身的left 和 right margins為auto即可。本文收集了六種利用css進行元素的垂直居中的方法，每一種適用於不同的情況，在實際的使用過程中選擇某一種方法即可。試用 單行文字...
將float元素居中的幾種辦法
在html css布局中，元素的居中一直是定位非常重要的部分。下面這些方法基本上是我在網上查閱資料以及自己的一些思考改良所得，不完全算是自己的原創。1 垂直居中 容器內垂直居中 思路 在float元素外層加乙個div，然後在css中設定display屬性。外層divcss樣式 div 2.水平居中 ...