這個是沒有浮動的情況下，我們可以先將要居中的塊級元素設為inline/inline-block，然後在其父元素上加上屬性text-align:center;即可。如果要居中的塊級元素直接是內聯元素（span、img、a等），直接在其父級元素上加上屬性text-align:center;即可；
前提：居中的元素必須是塊級元素，如果是內聯元素，需要新增屬性display:block;而且元素不浮動。
.way
.way img
.way4
.way4 img
div
div img
div
class
="table"
>
class
="table-cell"
>
近幾年隨著 jquery、ext 以及 css3 的發展，以 bootstrap 為代表的前端開發框架如雨後春筍般擠入視野，可謂應接不暇。不論是桌面瀏覽器端還是移動端都湧現出很多優秀的框架，極大豐富了開發素材，也方便了大家的開發。
特別提醒
jquery實現水平和垂直劇中的原理是通過jquery設定div的css，獲取div的左，上的邊距偏移量，邊距偏移量的演算法就是用頁面視窗的寬度減去該div的寬度，得到的值再除以2即左偏移量，右偏移量演算法相同。注意div的css設定要在resize（）方法中完成，就是每次改變視窗大小是，都要執行設定div的css，**如下：
$
(function()
);});})
此方法的好處就是不需要知道div 的具體寬度和高度，直接用jquery就可以實現水平和垂直居中，並且相容各種瀏覽器。這個方法在很多的彈出層效果中應用。
.div
.div img
bootstrap3居中方法
class
="col-lg-4 col-offset-4"
>
div>
bootstrap4居中
上面的居中方法是使整個元素居中，下面就來介紹下是元素內部居中的方法
bootstrap的柵格系統使用的是float:left的浮動方式，vertical-align屬性不起作用，故把內部div的float屬性清除，新增display屬性，如下：
.middle
給元素高度
.login-center
應用.align-items-center可以使元素垂直居中：
div
>
同理，應用justify-content-center可以使元素水平居中。 html 元素水平居中方式
本文將簡單敘述元素居中的基本方法。區 1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title center title 67 head 8 body 9 h1 style text align center html中元素的...
Html5 CSS之元素的五大居中方式
你是不是也對元素居中的知識點很是模糊？是不是苦於找不到乙個總結的通俗易懂的說明？是不是自己懶得去總結？恭喜你，搜到這篇部落格！這是鄙人在前端的學習與實踐中總結出的元素的五大居中方式，黏貼了 並對 做了解釋，希望對迷茫的有所幫助！下面的居中示例中，統一使用了同乙個div作為父元素和p作為子元素 設定乙...
元素水平居中和垂直居中的方式
關於居中的問題，一直處於疑惑不解的狀態，知道的幾種方法好像也不是每一次都會起到作用，所以更加迷惑。主要是不清楚該 在什麼情況下採用哪種解決方法，所以，整理了一些方法，梳理一下思路，做乙個總結。對於單行文字，可以設定它的行高等於它父容器的高度，這樣就實現了該文字的垂直居中，但是此方法只適用於單行文字。...