資訊專欄INFORMATION COLUMN
摘要：實現(xiàn)水平垂直居中通過實現(xiàn)水平垂直居中主要依賴于和決定了子元素的水平位置設置即可實現(xiàn)子元素的水平居中決定了子元素的垂直位置設置即可實現(xiàn)子元素的垂直居中，這里需要設置元素高度和實現(xiàn)水平垂直居中另一種簡單實現(xiàn)水平垂直居中的方
display:flex 實現(xiàn)水平垂直居中
通過display:flex實現(xiàn)水平垂直居中主要依賴于justify-content和align-items
justify-content決定了子元素的水平位置,設置justify-content:center即可實現(xiàn)子元素的水平居中
align-items決定了子元素的垂直位置,設置align-items:center即可實現(xiàn)子元素的垂直居中，這里需要設置元素高度
.container {
display: flex;
height: 100%;
width: 100%;
background-color: #f0f0f0;
justify-content: center;
align-items: center;
}
text-align:center和line-height實現(xiàn)水平垂直居中
另一種簡單實現(xiàn)水平垂直居中的方法就是利用text-align:center實現(xiàn)元素的水平居中，以及通過設置元素的height和line-height相同來實現(xiàn)子元素的垂直居中
.runningDuck {
text-align: center;
background-color: burlywood;
height: 200px;
line-height: 200px;
width: 200px;
color:white;
}
實現(xiàn)效果
代碼
水平垂直居中元素
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://www.ezyhdfw.cn/yun/107791.html