水平居中
文字的水平居中
text-align:center;
容器的水平居中
div#container {
width:760px;
margin:0 auto;
}
垂直居中
行高与容器高设为相等
当文本行高等于父容器高度时， 就可以实现单行文本垂直居中。
<style>
.box {border: 1px solid;
height: 100px;
line-height: 100px; /*行高等于父容器高度*/
}
</style>
</head>
<body>
<div class="box">1233344</div>
</body>
效果如下：
image.png
适用前提 ：
- 父容器高度已知
- 居中对象是单行文本
如果有n行文字，可以将行高设为容器高度的n分之一
父容器设置上下padding实现垂直居中
<style>
.box {border: 1px solid;
padding: 20px 0; /*父容器上下padding相等 */
}
</style>
</head>
<body>
<div class="box">1334<br/>455</div>
</body>
效果如下：
image.png
适用前提 ：
- 父容器高度没有写死
display: inline-block 和100%高度的before/after实现垂直居中
<style>
.parent {
border: 5px solid red;
height: 300px;
}
.child {
border: 3px solid blue;
display: inline-block;
vertical-align: middle;
}
.parent:before,.parent:after {
content:'';
border: 2px solid;
height: 100%;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">1234444344</div>
</div>
</body>
效果如下：
image.png
适用前提 ：
- CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式，这个我们后面还会用到。
table-cell 和 vertical-align: middle实现垂直居中
<style>
.parent {
border: 5px solid red;
height: 100px;
display: table;
}
.child {
border: 3px solid blue;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">1234444344</div>
</div>
</body>
效果如下：
image.png
利用table本身的特性实现垂直居中
<style>
.parent {
border: 5px solid red;
height: 100px;
}
.child {
border: 2px solid;
}
</style>
</head>
<body>
<table class="parent">
<tr>
<td class="child">table</td>
</tr>
</table>
</body>
效果如下：
image.png
绝对定位和负margin 实现垂直居中
<style>
.parent {
border: 3px solid red;
height: 100px;
position: relative;
}
.child {
border: 3px solid blue;
position: absolute;
width: 100px;
height: 40px;
top: 50%;
left: 50%;
margin-top: -20px; /*负margin值为要居中的对象child高度的一半 */
margin-left: -50px; /* 同上 */
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
效果如下：
image.png
适用前提 ：
- 需要居中对象宽高已知
绝对定位和translate -50% 结合使用实现垂直居中
<style>
.parent {
border: 3px solid red;
height: 100px;
position: relative;
}
.child {
border: 3px solid blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child">sssddddddddddddddd</div>
</div>
</body>
效果如下：
image.png
适用前提 ：
- 这个方法相对于上一种方法来说， 不需要知道居中对象宽高，更为方便，但是会有兼容性问题
flex 实现居中
<style>
.parent {
border: 3px solid red;
height: 100px;
display: flex;
justify-content: center;/* 主轴方向居中 */
align-items: center; /* 侧轴距中 */
}
.child {
border: 3px solid blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">sssddddddddddddddd</div>
</div>
</body>
效果如下：
image.png
