行內元素：為該行內元素的父元素新增設定text-align:center；
塊級元素：為其自身設定margin:auto樣式
子元素是行內元素：設定父元素的line-height為其自身盒子的高度
子元素是塊級元素但子元素高度沒有設定：設定父元素是
display:table-cell;vertical-align:middle;來解決
子元素是塊級元素且高度已經設定：計算子元素是margin-top或margin-bottom，計算為父（元素高度-子元素高度）/2
一、 利用flex布局，直接在父元素上設定
display:flex;
justify-content:center;//左右居中
align-items:center;//上下居中
父元素：position:relative
子元素：
width:40px;
height:40px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);//或者是margin-left:-20px;margin-top:-20px;
.wrap
.inner
垂直居中和水平居中總結
container center 以上 可使塊級子元素水平垂直居中，為inline block的子元素只能垂直居中，若也想其水平垂直居中確保在父元素樣式中新增 text align center。關鍵必須設定其父元素固定寬高。即使有多個子元素也一樣可以垂直水平居中。當子元素都為行內元素 行內元素不能...
CSS 垂直居中和水平居中
position relative width 500px height 500px background color ddd content background color 6699ff width 50 height 50 position absolute top 25 left 25 這兩...
CSS垂直居中和水平居中
總括 css居中一直是乙個比較敏感的話題，為了以後開發的方便，樓主覺得確實需要總結一下了，總的來說，居中問題分為垂直居中和水平居中，實際上水平居中是很簡單的，但垂直居中的方式和方法就千奇百怪了。人生用物，各有天限 夏澇太多，必有秋旱。水平居中設定 行內元素 設定 text align center ...