/* 大家可以自己去菜鳥教程玩起來*/
/* 第一種方案 flex彈性布局 子元素高度可以設定也可以不設定*/
width:
500px;
height:
500px;
background: greenyellow;
display: flex;
align-items: center;
justify-content: center;
} width:
100px;
height:
100px;
font-size:
20px;
background: blueviolet;
}/* 第二種方案 子元素高度可以設定也可以不設定*/
width:
500px;
height:
500px;
background: greenyellow;
position: relative;
} width:
100px;
height:
100px;
font-size:
20px;
background: blueviolet;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin: auto;
}/* 第三種方案 子元素高度可以設定也可以不設定*/
width:
500px;
height:
500px;
background: greenyellow;
position: relative;
} width:
100px;
height:
100px;
font-size:
20px;
background: blueviolet;
position: absolute;
top:50%
; left:50%
; transform:
translate(-
50%,-
50%);
}/* 第四種方案 高度就是文字加line-height的高度 侷限性在於必須裡邊的元素是inline否則不生效*/
width:
500px;
height:
500px;
background: greenyellow;
line-height:
500px;
text-align: center;
} width:
100px;
font-size:
20px;
background: blueviolet;
display: inline;
}/* 第五種方案 橫向利用margin auto，垂直還是利用定位和平移 也不用管裡邊元素的高度*/
width:
500px;
height:
500px;
background: greenyellow;
} width:
100px;
font-size:
20px;
background: blueviolet;
position: relative;
top:50%
; transform:
translatey(-
50%);
margin-left: auto;
margin-right:auto ;
}
實現垂直水平居中的方法
因為這一型別題目我面試的時候被問了很多遍，然後就想總結一下吧。大概分了幾類。html 如下 id parent id child div div 其樣式 container child第一類 不知道父元素的寬高和子元素的寬高 利用絕對定位 其百分比是相對于父元素而言 和transform的trans...
實現垂直水平居中的方法
1.定位 top 50 left 50 1 知道寬高的情況下margin left margin top 給個 1 2 寬高 2 不知道的請況 translate 50 50 2.flex display flex 1 水平方向 justify content center 2 垂直方向 align...
實現水平居中和垂直居中的方法
一 水平居中 1.text align center 行內元素 給其父元素設定屬性 text align center 2.margin 0 auto 塊級元素 給元素本身設定 margin 0 auto 3.元素的寬度固定 ele 4.元素的寬度不固定 ele 二 垂直居中 1.line heig...