CSS中的居中：水平居中， 垂直居中
2018-10-31 本文已影响1人
河的左岸
1. 水平居中
(1)是不是行内元素(inlin-*)？
主要使用text-align: center; 来实现，例如：
header, nav {
text-align: center;
background: white;
margin: 20px 0;
padding: 10px;
}
<!-- HTML -->
<header>
This text is centered.
</header>
(2)是不是块元素(block)？
块元素（block-level element），要将它的margin-left , margin-right设置为auto, 另外需要将它设置一个width:200px，否则它的宽度会占满最大宽度 ，而这样就没有水平居中的必要了。
不管该块元素或者其父元素宽度设置为多少，它都会生效。
.center-me { margin: 0 auto; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
</head>
<body translate="no">
<main>
<div class="center">
I'm a block level element and am centered.
</div>
</main>
</body>
</html>
特别注意：不能通过float一个元素来居中。看这里 https://css-tricks.com/float-center/
(3)是不是多个块元素？
如果你有两个或多个块级元素需要在一行中水平居中，最好让它们成为不同的display类型。这是一个使它们成为inline-block的例子和一个flexbox的例子：
<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>
<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>
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;
}
.flex-center {
display: flex;
justify-content: center;
}
如果多个块元素需要分多行居中显示，这个时候使用前面的margin: 0 auto是生效的。
2. 垂直居中
垂直居中在CSS中是比较棘手的。
(1) 是不是行内元素？ inline or inline-* elements (like text or links)
A. 是不是单行？
上下有相等的padding值，会让它居中。
.link {
padding-top: 30px;
padding-bottom: 30px;
}
如果由于某种原因填充不是一个选项，并且你试图将一些你知道不会换行的文本居中，那么就有一个技巧是:使得line-height等于height。
B. 是不是多行？
padding-top和padding-bottom的相等也可以为多行文本提供居中效果。如果这不起作用，可能是因为文本元素在一个table cell，或者表面上通过CSS表现得像是一个table cell。
在这种情况下，vertical-align属性处理这个问题，与处理行上对齐元素的对齐方式不同。
TODO......
(2) 是不是块元素(block-level)？
A.知道元素的height ？
B.不知道元素的height ？
C.能用flex布局吗 ？
这个就非常简单了，直接使用列式布局方向：
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
