想要水平居中？
.center-children { text-align: center;}
.center-me { margin: 0 auto;}
.inline-block-center {
text-align: center;
}
.inline-block-center div {
display: inline-block;
text-align: left;
}
.flex-center {
display: flex;
justify-content: center;
}
想要垂直居中？
-
内联的元素？
- 如果只有一行的话，可以设置上下内边距为相同的值。
- 如果是多行文本的话，可以模拟表格。
.center-table {
display: table;
height: 250px;
background: white;
width: 240px;
margin: 20px;
}
.center-table p {
display: table-cell;
margin: 0;
background: black;
color: white;
padding: 20px;
border: 10px solid white;
vertical-align: middle;
}
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
