参考资料
- http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html
- https://css-tricks.com/centering-css-complete-guide/
- http://howtocenterincss.com/
笔记
- 父容器清除浮动，避免父元素的塌陷，即内部元素都发生浮动后，高度为0.
<div class="box-set">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
<style>
.box-set:before,
.box-set:after {
display: table;
content: "";
}
.box-set:after {
clear: both;
}
.box-set {
*zoom: 1;
}
.box-set {
background: red;
}
.box {
background: #8ec63f;
margin-top: 20px;
height: 100px;
float: left;
margin: 10px;
width: 200px;
box-shadow: 0 0 500px #000;
}
</style>
效果图.png
水平居中
inline元素在block父元素内时:
.center-children {
text-align: center;
}
下面是一个例子：
<header>
This text is centered.
</header>
<nav role='navigation'>
<a href="#0">One</a>
<a href="#0">Two</a>
<a href="#0">Three</a>
<a href="#0">Four</a>
</nav>
<style>
body {
background: #f06d06;
}
header, nav {
text-align: center;
background: white;
margin: 20px 0;
padding: 10px;
}
nav a {
text-decoration: none;
background: #333;
border-radius: 5px;
color: white;
padding: 3px 8px;
}
</style>
效果.png
如果是block元素时：
.center-me {
margin: 0 auto;
width: 200px;// 必须加宽度，否则block元素会撑满宽度，没必要居中了
}
下面是一个例子：
<main>
<div class="center">
I'm a block level element and am centered.
</div>
</main>
<style>
body {
background: #f06d06;
}
main {
background: white;
margin: 20px 0;
padding: 10px;
}
.center {
margin: 0 auto;
width: 200px;
background: black;
padding: 20px;
color: white;
}
<style>
效果.png
如果是多个block元素排列成一行并居中时：
第一种做法是改变display的类型：
<main class="inline-block-center">
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings
do.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
</main>
<style>
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
margin: 20px 0;
padding: 10px;
}
main div {
background: black;
color: white;
padding: 15px;
max-width: 125px;
margin: 5px;
}
.inline-block-center {
text-align: center;
}
.inline-block-center div {
display: inline-block;
text-align: left;
}
</style>
效果.png
第二种是使用flex：
<main class="flex-center">
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings
do.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
</main>
<style>
.flex-center {
display: flex;
justify-content: center;
}
</style>
效果与上图一致
垂直居中
如果是inline元素且在一行中垂直居中
只要把该元素的上下padding设置为一样即可，
.link {
padding-top: 30px;
padding-bottom: 30px;
}
例如:
<main>
<a href="#0">We're</a>
<a href="#0">Centered</a>
<a href="#0">Bits of</a>
<a href="#0">Text</a>
</main>
<style>
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
margin: 20px 0;
padding: 50px;
}
main a {
background: black;
color: white;
padding: 40px 30px;
text-decoration: none;
}
</style>
效果如下图：
效果.png
如果因为各种原因不能使用padding设置，比如内容无法在一行内显示，则可以使用把line-height等于height即可：
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
例如：
<main>
<div>
I'm a centered line.
</div>
</main>
<style>
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
margin: 20px 0;
padding: 40px;
}
main div {
background: black;
color: white;
height: 100px;
line-height: 100px;
padding: 20px;
width: 50%;
white-space: nowrap;
}
</style>
效果：
效果.png
如果是inline元素且在多行中垂直居中
第一种方法：
<table>
<tr>
<td>
I'm vertically centered multiple lines of text in a real table cell.
</td>
</tr>
</table>
<style>
body {
background: #f06d06;
font-size: 80%;
}
table {
background: white;
width: 240px;
border-collapse: separate;
margin: 20px;
height: 250px;
}
table td {
background: black;
color: white;
padding: 20px;
border: 10px solid white;
/* default is vertical-align: middle; */
}
</style>
第二种方法：
<main>
<div class="center-table">
<p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>
</main>
<style>
body {
background: #f06d06;
font-size: 80%;
}
.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;
}
</style>
第三种方法：
<div class="flex-center">
<p>I'm vertically centered multiple lines of text in a flexbox container.</p>
</div>
<style>
body {
background: #f06d06;
font-size: 80%;
}
div {
background: white;
width: 240px;
margin: 20px;
}
.flex-center {
background: black;
color: white;
border: 10px solid white;
display: flex;
flex-direction: column;
justify-content: center;
height: 200px; // 必须有一个固定的高度
resize: vertical;
overflow: auto;
}
.flex-center p {
margin: 0;
padding: 20px;
}
</style>
效果如下：
效果.png
如果以上都不能使用：
.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
}
例如：
<div class="ghost-center">
<p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p>
</div>
<style>
body {
background: #f06d06;
font-size: 80%;
}
div {
background: white;
width: 240px;
height: 200px;
margin: 20px;
color: white;
resize: vertical;
overflow: auto;
padding: 20px;
}
.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
width: 190px;
margin: 0;
padding: 20px;
background: black;
}
</style>
如果是block元素且已知元素高度
不知道高度的情况很常见，但是如果知道高度，可以：
.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; */
}
例如：
<main>
<div>
I'm a block-level element with a fixed height, centered vertically within my parent.
</div>
</main>
<style>
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
height: 300px;
margin: 20px;
width: 300px;
position: relative;
resize: vertical;
overflow: auto;
}
main div {
position: absolute;
top: 50%;
left: 20px;
right: 20px;
height: 100px;
margin-top: -70px;
background: black;
color: white;
padding: 20px;
}
</style>
效果如下：
效果.png
如果是blobk元素且不知道元素高度
如下：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
例如：
<main>
<div>
I'm a block-level element with an unknown height, centered vertically within my parent.
</div>
</main>
<style>
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
height: 300px;
margin: 20px;
width: 300px;
position: relative;
resize: vertical;
overflow: auto;
}
main div {
position: absolute;
top: 50%;
left: 20px;
right: 20px;
background: black;
color: white;
padding: 20px;
transform: translateY(-50%);
resize: vertical;
overflow: auto;
}
</style>
如果可以使用flexbox
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
例如：
<main>
<div>
I'm a block-level element with an unknown height, centered vertically within my parent.
</div>
</main>
<style>
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
height: 300px;
width: 200px;
padding: 20px;
margin: 20px;
display: flex;
flex-direction: column;
justify-content: center;
resize: vertical;
overflow: auto;
}
main div {
background: black;
color: white;
padding: 20px;
resize: vertical;
overflow: auto;
}
</style>
同时水平和垂直居中
如果元素的宽高是固定的
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
例如：
<main>
<div>
I'm a block-level element a fixed height and width, centered vertically within my parent.
</div>
</main>
<style>
body {
background: #f06d06;
font-size: 80%;
padding: 20px;
}
main {
position: relative;
background: white;
height: 200px;
width: 60%;
margin: 0 auto;
padding: 20px;
resize: both;
overflow: auto;
}
main div {
background: black;
color: white;
width: 200px;
height: 100px;
margin: -70px 0 0 -120px;
position: absolute;
top: 50%;
left: 50%;
padding: 20px;
}
</style>
效果：
效果.png
如果不知道元素的宽高
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
例如:
<main>
<div>
I'm a block-level element of an unknown height and width, centered vertically within my parent.
</div>
</main>
<style>
body {
background: #f06d06;
font-size: 80%;
padding: 20px;
}
main {
position: relative;
background: white;
height: 200px;
width: 60%;
margin: 0 auto;
padding: 20px;
resize: both;
overflow: auto;
}
main div {
background: black;
color: white;
width: 50%;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
padding: 20px;
resize: both;
overflow: auto;
}
</style>
效果：
效果.png
如果可以用flexbox
.parent {
display: flex;
justify-content: center;
align-items: center;
}
例如：
<main>
<div>
I'm a block-level-ish element of an unknown width and height, centered vertically within my parent.
</div>
</main>
<style>
body {
background: #f06d06;
font-size: 80%;
padding: 20px;
}
main {
background: white;
height: 200px;
width: 60%;
margin: 0 auto;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
resize: both;
overflow: auto;
}
main div {
background: black;
color: white;
width: 50%;
padding: 20px;
resize: both;
overflow: auto;
}
</style>
网友评论