1.水平居中：
1） 子元素：margin : 0 auto
2） 使用絕對定位：父元素：position:relative;
子元素：position:absolute;
left:50%;
transform:translatex(-50%);
3） 父元素：text-align:center;
子元素：display:inline-block;
2.垂直居中：
1） 父元素：display:table-cell;vertical-align:middle;
2） 使用絕對定位：父元素：position:relative;
子元素：position:absolute;
top:50%;
transform:translatey(-50%);
3) 使用相對定位；
CSS水平垂直居中方式
1.grid布局實現 一 father 2.grid布局實現 二 father 3.grid配合margin實現 father son 4.flex布局實現 father 5.flex配合margin實現 father son 6.使用display table cell實現 father son ...
CSS垂直居中水平居中方法
center 剛在別人的部落格裡看到這種方法時真的覺得很奇葩，以下是大神的解釋 解釋 1 在普通內容流中，margin auto的效果等同於margin top 0 margin bottom 0。2 position absolute使絕對定位塊跳出了內容流，內容流中的其餘部分渲染時絕對定位部分不...
居中（水平居中 垂直居中）
一 水平居中。1.最普通的 在視口或視窗中 水平居中。先寫乙個div，給它一些基本樣式。此時只用設定乙個屬性 margin，就得到了居中的結果 沒錯，這就是凝膠物布局，此方法必須設定元素的width 2.居中乙個絕對定位的元素。上述方法的元素使用預設的定位，即static，那麼當元素是絕對定位 ab...