CSS水平、垂直居中
阿新 • • 發佈:2018-12-13
水平居中
1.行內元素
父元素使用使用text-align: center;
2.寬度一定
使用margin:0 auto;
3.寬度不一定
- 將子元素改為行內元素
display: inline;
在給父元素使用text-align: center;
- 用父級元素浮動和相對定位以及lelf:50%。子元素照樣設定但left:-50%
.container ul{ float: left; position: relative; left: 50%; } .container li{ float: left; position: relative;l eft:-50%; }
垂直居中
表格佈局vertical-align: middle;
#box{
display: table;
}
#contentl {
display: table-cell;
vertical-align: middle;
}
2.絕對定位
<div class="content"> Content goes here</div> #content { position: absolute; top: 50%; height: 100px; width: 100px; background-color: red; margin-top: -50px; //設定為 - 高的一半 }
水平垂直居中
1.position
元素已知寬度
父元素:position: relative;
子元素:position: absolute;
將margin
的margin-top
設定為-
高度的一半
margin-left
設定為-
寬度的一半
.box { height: 500px; width: 500px; position: relative; } .content{ width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; }
2.position transform
元素未知寬度
將方法1的margin
改為transform: translate(-50%,-50%);
3.flex
佈局
.a {
width: 600px;
height: 600px;
background-color: blue;
display: flex; //flex佈局
justify-content: center; //使子元素水平居中
align-items: center; //使子元素垂直居中
}
.b {
background-color: red;
width: 200px;
height: 100px;
}
3.table-cell佈局 給元素最外層增加一個div
<div class="box">
<div class="content">
<div class="inner">
</div>
</div>
</div>
.box {
width: 300px;
height: 300px;
display: table; //表格佈局
}
.content {
background-color: rgba(112,223,223, 0.5);
display: table-cell;
vertical-align: middle; //使元素垂直局中
text-align: center; //使元素水平居中
}
.inner {
background-color: #000;
display: inline-block;
width: 20%;
height: 20%;
}