1.水平居中 【寬高固定】
margin:0 auto【寬高固定】 【水平垂直居中】
width: 200px;
height: 200px;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
【寬高固定】 【水平垂直居中】
width: 200px;
height: 100px;
position: fixed;
left: 50%;
top: 50%;
margin: -100px -50px;
【寬高固定+不固定】 【水平垂直居中】
width: 200px;
height: 100px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
【寬高固定+不固定】 【水平垂直居中】
display: flex;
align-items: center;
justify-content: center;
常見的水平垂直居中方法
方法一 絕對定位方法 不確定當前div的寬度和高度，採用transform translate 50 50 當前div的父級新增相對定位 position relative 如下 div 方法二 絕對定位方法 確定了當前div的寬度，margin值為當前div寬度一半的負值 如下 div 方法三 絕...
CSS中多種常見居中方法
container container container center 將上下padding的值相等 container center class parent class child 這裡內容會自動居中 td tr table 設定display的值為table cell，將元素變為 cell顯...
常見居中方式 （水平居中 垂直居中）
1.水平居中 1 子元素 margin 0 auto 2 使用絕對定位 父元素 position relative 子元素 position absolute left 50 transform translatex 50 3 父元素 text align center 子元素 display in...