1. Center a floating element. The parent element and the child element float to the left at the same time. Then the parent element moves 50% to the left, the child element moves 50% to the right, or the child element moves -50% to the left.
<div class="p">
<div class="c">
<span>水平居中浮动元素</span>
</div>
</div>
.p {
position: relative;
float: left;
left: 50%;
}
.c {
position: relative;
float: left;
right: 50%;
}
2. Vertical and Horizontal Center
<div class="center">
<span>水平垂直居中</span>
</div>
.center {
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -100px;
}
3. The picture is horizontally and vertically centered tabel_cell
<div class="test_box">
<img src="img/head.png" alt="">
</div>
.test_box {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
border: 1px solid #000;
}
.test_box img {
margin: auto;
position: absolute;
right: 0;
bottom: 0;
left: 0;
top: 0;
}
4. The picture is horizontally span vertically centered
<div class="test_box">
<span class="hook"></span>
<img src="img/book.jpg" alt="">
</div>
.test_box {
width: 200px;
height: 200px;
text-align: center;
border: 1px solid #000;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
.test_box .hook {
display: inline-block;
height: 100%;
margin-left: -1px;
vertical-align: middle;
}
.test_box img {
vertical-align: middle;
}
5. Center horizontally and vertically (applicable to cases where the parent element has only one child element, such as full screen effect)
<div class="outer">
<h1 class="inner">适用于父级元素只有一个子元素的情况,比如全屏的效果。</h1>
</div>
.outer {
position: absolute;
width: 400px;
height: 400px;
background: #f80;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
}
.inner {
border: 3px solid green;
position: absolute;
margin: auto;
overflow: hidden;
width: 50%;
height: 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
6. Center horizontally and vertically (Method 1: Use line-height)
<div class="box">
<div class="content">水平垂直居中</div>
</div>
.box {
width: 200px;
height: 200px;
margin: 0 auto;
background: #ddf;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.content {
line-height: 200px;
vertical-align: middle;
text-align: center;
overflow: hidden;
}
7. Center horizontally and vertically (Method 2: Use containers as table cells)
<div class="box">
<div class="content">水平垂直居中</div>
</div>
.box {
width: 200px;
height: 200px;
background: #ddf;
display: table;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
8. Horizontal and Vertical Center (Solution under Method 3 and IE6)
<div class="box">
<div class="content">水平垂直居中</div>
</div>
.box {
width: 200px;
height: 200px;
background: #ddf;
display: table;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.content {
_position: relative;
_top: 50%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.content > div {
_position: relative;
_top: -50%;
}
9. Center horizontally and vertically (method 4, use of negative margin)
<div class="box">
<div class="content">水平垂直居中</div>
</div>
.box {
width: 200px;
height: 200px;
background: #ddf;
display: table;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.content {
width: 100px;
height: 80px;
padding: 10px;
background: #abc;
position: absolute;
top: 50%;
left: 50%;
margin-left: -60px;
margin-top: -50px;
}
.content > div {
_position: relative;
_top: -50%;
}