水平居中的方法：
- 如果需要居中的元素为常规流中 inline 元素，为父元素设置
text-align: center;即可实现 - 如果需要居中的元素为常规流中 block 元素，1）为元素设置宽度，2）设置左右 margin 为 auto。3）IE6 下需在父元素上设置
text-align: center;, 再给子元素恢复需要的值
<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
text-align: center; /* 3 */
}
.content {
500px; /* 1 */
text-align: left; /* 3 */
margin: 0 auto; /* 2 */
background: purple;
}
</style>
- 如果需要居中的元素为浮动元素，1）为元素设置宽度，2）
position: relative;，3）浮动方向偏移量（left 或者 right）设置为 50%，4）浮动方向上的 margin 设置为元素宽度一半乘以 - 1
<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
}
.content {
500px; /* 1 */
float: left;
position: relative; /* 2 */
left: 50%; /* 3 */
margin-left: -250px; /* 4 */
background-color: purple;
}
</style>
- 如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）偏移量设置为 50%，3）偏移方向外边距设置为元素宽度一半乘以 - 1
<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
position: relative;
}
.content {
800px;
position: absolute;
left: 50%;
margin-left: -400px;
background-color: purple;
}
</style>
- 如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）设置左右偏移量都为 0,3）设置左右外边距都为 auto
<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
position: relative;
}
.content {
800px;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
background-color: purple;
}
</style>
垂直居中的方法：
- line-height 方法
<body>
<div class="parent">
<div class="child">this</div>
</div>
</body>
<style>
.parent {
200px;
height: 100px;
background-color: #ddd;
}
.child {
line-height: 100px;
}
</style>
- CSS table 布局方法
<body>
<div class="parent">
<div class="child">this</div>
</div>
</body>
<style>
.parent {
display: table;
200px;
height: 100px;
background-color: #ddd;
}
.child {
display: table-cell;
vertical-align: middle;
}
</style>
- 绝对定位和负外边距方法
<body>
<div class="parent">
<div class="child">this</div>
</div>
</body>
<style>
.parent {
position: relative;
200px;
height: 100px;
background-color: #ddd;
}
.child {
position: absolute;
top: 50%;
left: 50%;
100px;
height: 50px;
margin-top: -25px;
margin-left: -50px;
background-color: #aaa;
}
</style>
- 绝对定位和垂直拉伸方法
<body>
<div class="parent">
<div class="child">this</div>
</div>
</body>
<style>
.parent {
position: relative;
200px;
height: 100px;
background-color: #ddd;
}
.child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
50%;
height: 50%;
margin: auto;
background-color: #aaa;
}
</style>
- 利用浮动方法
<body>
<div class="parent">
<div class="floater"></div>
<div class="child">this</div>
</div>
</body>
<style>
.parent {
200px;
height: 100px;
background-color: #ddd;
}
.floater {
float: left;
height: 50%;
100%;
margin-bottom: -25px;
}
.child {
clear: both;
height: 50px;
background-color: #aaa;
}
</style>
- flex 布局方法
<body>
<div class="parent">
<div class="child">this</div>
</div>
</body>
<style>
.parent {
display: flex;
justify-content: center;
align-items: center;
200px;
height: 100px;
background-color: #ddd;
}
.child {
100px;
height: 50px;
background-color: #aaa;
}
</style>