面試題之css中的垂直水平居中

面試經常問的乙個問題，今天來總結下，分兩塊：居中元素需要高度和不需要高度

先寫下都需要的樣式和標籤元素

class

="wrap"
>
class
="box"
>
我是居中元素div
>
div>

html,body

.wrap

.box

.wrap

.box

calc可獲取當前視窗的大小

.wrap

.box

transform的translate可根據自身的寬度和高度做出相應的布局

.wrap

.box

.wrap

.box

.wrap

.box

將容器設為**單元格，注意容器的寬高不能用百分比，容器的子元素要設為行級塊元素或行級元素

.wrap

.box

.wrap

.box

容器要有不是百分比的寬高，子元素是行級塊元素，

.wrap

.box

面試題 水平居中

盒子模型 margin padding 行內塊元素對齊 定位 彈性布局 水平居中 給父元素新增padding左右 複製 給子元素新增margin auto 複製 給父元素加text align center 子元素加dispaly inline block 複製 4.給父元素加position re...

面試必問之CSS水平垂直居中

margin 0 auto text align center outer inner 父元素 display flex 彈性布局 子元素 align self center 設定單個子元素在縱軸上的排列 outer inner display flex 彈性布局 justify content c...

CSS之容器水平垂直居中

html css wrap wrap center 相容性 主流瀏覽器均支援，ie6不支援 css wrap center 相容性 由於display table cell的原因，ie6 7不相容12 3456 78910 1112 1314 1516 1718 1920 2122 css wrap...