#水平方向居中
1、inline 和 inline-* 元素的水平方向居中
将一个块级元素中的 inline 或者类 inline 元素居中,在需要居中的元素的父元素上面加:
、、、text-align:center;、、、
注意: 这个方法对 inline, inline-block, inline-table, inline-flex 元素都有效。
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
header, nav {
text-align: center;
border: 1px solid red;
}
</style>
</head>
<body>
<header>
我要居中!!!
</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>
</body>
</html>
2、块级元素的水平方向居中
首先这个块级元素必须宽度固定,然后左外边距和右外边距设为auto
width: 100px;
margin: 0 auto;
例子:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
main{
text-align: center;
border: 1px solid green;
}
main div {
display: inline-block;
border: 1px solid red;
}
</style>
<body>
<main>
<div>
123
</div>
<div>
456
</div>
<div>
789
</div>
</main>
</body>
</html>
3、如果想让多个块级元素在同一行中水平居中时,
①父元素上面加:
、、、text-align:center;、、、
②块级元素修改display: inline-block;
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
body{
text-align: center;
border: 1px solid black;
}
div{
display: inline-block;
border: 1px solid red;
}
</style>
</head>
<body>
<div>我要</div><div>居中</div>
<div>!!!</div>
</body>
</html>
#垂直方向居中
一、inline 和 inline-* 元素的垂直方向居中
1、单行的内联元素垂直居中
①最简单的一种,上内边距和下内边距相等:
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
main {background: white;
margin: 20px 0;
padding: 50px;
}
main a {background: black;
color: white;
padding: 40px 30px;
text-decoration: none;
</style>
<title>JS Bin</title>
</head>
<body>
<main>
<a href="#0">We're</a>
<a href="#0">Centered</a>
<a href="#0">Bits of</a>
<a href="#0">Text</a>
</main>
</body>
</html>
②因为某些原因不能使用这种简单粗暴的方法(这种方法也有其局限性),或者你想垂直居中没有元素包裹的文本的时候,利用 line-height 属性。将容器的 line-height 的值设置为与容器高度相同的值,就能很轻松的居中文本。
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
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>
<title>JS Bin</title>
</head>
<body>
<main>
<div>
I'm a centered line.
</div>
</main>
</body>
</html>
2、多行的内联元素垂直居中
①上下内边距相等的方法同样可以用在多行的处理上,但是就像前面所说的,这种方法有局限性。当元素是一个表格单元或者通过 CSS 的设置表现成一个单元格时,这种方法就不奏效了。在这种情况下,使用 vertical-align 属性来解决这个问题
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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;
/* 单元格自带 vertical-align: middle; */
}
.center-table {display: table;
height: 250px;
background: white;
width: 240px;
margin: 20px;
}
.center-table p {display: table-cell; // 将 p 表现成一个单元格
margin: 0;
background: black;
color: white;
padding: 20px;
border: 10px solid white;
vertical-align: middle; // 添加单元格默认的属性
}
</style>
<title>JS Bin</title>
</head>
<body>
<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>
</body>
</html>
②如果不能使用“表格大法”,可以试试 flexbox。一个 flex-child 在 flex-parent 中垂直居中松松的。
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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;
}
.flex-center p {margin: 0;
padding: 20px;
}
</style>
<title>JS Bin</title>
</head>
<body>
<div class="flex-center">
<p>I'm vertically centered multiple lines of text in a flexbox container.</p>
</div>
</body>
</html>