HTML讓元素居中顯示
阿新 • • 發佈:2019-01-05
水平居中
- 水平居中:給div設定一個寬度,然後新增margin:0 auto屬性
div{
width:200px;
margin:0 auto;
}
- 讓絕對定位的div居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: bule;
}
水平垂直居中
- 確定容器的寬高 寬500 高 300 的層 設定元素的外邊距
div {
position: relative; /* 相對定位或絕對定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -250px; /* 外邊距為自身寬高的一半 */
//margin:-150px 0 0 -250px; /*一樣*/
background-color: blue;
}
- 未知容器的寬高,利用
transform
屬性
div {
position: absolute ; /* 相對定位或絕對定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: blue;
}
- 利用
flex
佈局
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div {
width : 100px;
height: 100px;
background-color: blue;
}