标签：
如果需要居中的元素是内联元素（display为inline or inline-*），如text或a时，则可以将其放在块级父元素中，像这样：
.center-children {
display:block;
text-align: center;
}
这对display为 inline, inline-block, inline-table, inline-flex等样式的元素有用。
源码：
HTML
<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> CSS
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;
}如果需要居中的元素是块级元素（display:block），如div时，则可以设置margin-left和margin-right为auto。记得设置 元素的宽度，否则宽度自动为100%，从而不要居中。通常这样设置：
.center-me {
margin: 0 auto;
}
记住通过设置float样式是不可能让元素居中的。
源码：
HTML
<main>
<div class="center">
I‘m a block level element and am centered.
</div>
</main>CSS
.center {
margin: 0 auto;
width: 200px;
background: black;
padding: 20px;
color: white;
}如果需要水平居中的元素是多个块级元素（display:block）时，有两种办法可以实现。方法1：将需要居中的多个元素设置为内联块级（display:inline-block）元素，并设置最大宽度（max-width）。方法2：将父元素的display设置为flex，justify-centent设置为center。
源码：
HTML
<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>CSS
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;
}如果是单行的内联元素，可以通过设置内补丁padding的方式居中。如果由于某种原因不方便采用的话，还有一种小技巧可以达到效果，即将text的line-height等于height。
源码：
HTML
<main>
<a href="#0">We‘re</a>
<a href="#0">Centered</a>
<a href="#0">Bits of</a>
<a href="#0">Text</a>
</main>CSS
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;
}多行内联元素居中。可以使用table和cell元素，或者类似的技术。因为cell元素在table中默认垂直居中。
源码：
HTML
<table>
<tr>
<td>
I‘m vertically centered multiple lines of text in a real table cell.
</td>
</tr>
</table>
<div class="center-table">
<p>I‘m vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>CSS
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; */
}
.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;
}或者使用flex。
源码：
HTML
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; */
}
.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;
}CSS
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;
}如果知道父元素的高度，但是不知道要居中元素的高度，那么可以这样
.parent {
position: relative;
height:150px;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
或这样
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
使用transform:translate
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
使用flex
.parent {
position: relative;}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
现在你应该会使用CSS居中元素了吧！！
标签：
原文地址：http://my.oschina.net/yqz/blog/496622
