让元素居中的几种方法
2016-08-12 本文已影响80人
味蕾里的青春
一、让元素水平居中
1.想要一个块级元素在其包含元素内居中，可以将此块级元素的左、右外边距的值设为auto。
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="box1">
<p class="box2">
This is a paragraph with a fixed width,
and left and right margins set to auto,
So it's centered.
</p>
</div>
</body>
</html>
CSS代码：
.box1 {
background-color:pink;
width:400px;
height:100px;
}
.box2 {
background-color:green;
width:300px;
height:50px;
margin-left:auto;
margin-right:auto;
}
Output:
output1.png
2.想要一个inline元素、或inline-block元素在其包含元素内居中，可以将其被包含元素设置为 text-align:center。
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="box1">
<p class="box2">
This is a paragraph with a fixed width,
and left and right margins set to auto,
So it's centered.<br>
</p>
<p class="box3"> <a href="hicc.me">想了解更多请点击。</a>
</p>
</div>
</body>
</html>
CSS代码：
.box1 {
background-color:pink;
width:500px;
height:200px;
}
.box2 {
background-color:green;
width:450px;
height:80px;
margin-left:auto;
margin-right:auto;
}
.box3 {
width:400px;
background-color:blue;
height:80px;
text-align:center;
}
a {
background-color:yellow;
}
Output:
output2.png
二、让元素垂直居中
在transform: translateY的帮助下我们可以使用三行CSS代码让任何甚至不知道高度的元素垂直居中。CSS的transform属性常用来旋转和缩放元素，现在我们可以使用它的translateY函数垂直对齐元素。
垂直居中通常的做法是使用绝对定位或者设置行高，但是这两种方案的弊端是要么需要你知道元素的高度，要么只能作用于单行文本（注：inline或者inline-block元素）。
代码如下：
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
