1.text-align
text-align: center;
/*line-height: 100px;*/
padding: 50px 0;
2. 絕對定位實現(xiàn)居中
position: absolute;
top: 50%;
left: 50%;
/*margin-left: -100px;*/
/*margin-top: -50px;*/
transform: translate(-50%,-50%);
}
3. vertical-align實現(xiàn)居中
.container {
width: 600px;
height: 400px;
border: 1px solid;
text-align: center;
}
.container::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
image.png
4. table-cell實現(xiàn)居中
.container {
width: 600px;
height: 400px;
border: 1px solid ;
display: table-cell;
vertical-align: middle;
text-align: center;
}
實現(xiàn)效果和vertical-align一樣焊切。
5. display: flex
.container {
width: 100vw;
height: 100vh; /* 設(shè)置寬高以顯示居中效果 */
display: flex; /* 彈性布局 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
body {
margin: 0;
background: rgba(0, 0, 0, .95);
}
.container::after {
content: '??';
font-size: 85px;
}
.container::before {
content: '??';
font-size: 85px;
}
image.png
最終實現(xiàn)元素垂直水平居中
