實現元素水平垂直居中的四種方法

一、使用 transform 與 position 結合

二、使用 position 定位和 偏移 屬性

三、使用 position 定位和 外邊距 屬性

四、使用 flex 彈性布局

主要利用transform屬性實現上下左右居中

css部分

.demo

主要利用absolute屬性和偏移屬性實現上下左右居中

css部分

.demo

主要利用absolute屬性和外邊距屬性實現上下左右居中
css部分
.demo
html部分

主要利用flex彈性布局
注意：
1、首先將父元素設定為 display:flex；justify-content: center；align-items: center;
2、其次將父元素高度設定為 height:100vh，根據 css3 的規範，1vh 等於視口高度的1%（1vw 等於視口寬度的1%），那麼 100vh 就是適口高度的 100%，即佔滿整個螢幕。
css部分
html,body  

.container 
.demo 
html部分

讓元素水平垂直居中的四種方法
將子元素的寬和高設定為百分數，如寬設定為 80 則需要向 x 軸偏移 10 那麼 translatex 為10 80 0.125，即 12.5 如果高設定為 60 則需要向 y 軸偏移 20 那麼 translatey 為20 60 33 即子元素需要設定 transfrom translate 1...
水平垂直居中的四種方法
lang en charset utf 8 水平垂直居中title color center container1 container1 center container2 container2 center container3 container3 center container4 style...
元素水平垂直居中的四種方式
1.flex彈性盒 使用flex彈性盒的居中方式，我們只需要給與其父元素設定 這三個屬性就可以讓其內部元素水平垂直居中 父元素內只有乙個子元素 2.position定位 要求父元素是定位屬性元素也就是position不為static 2.1margin負值 給要水平垂直的元素設定屬性 2.2marg...