一、块级元素
1.1 margin
这里需要说明的是外边距margin方法只适用于块级元素同时指定了宽度：因为若是非块级元素，左右外边距auto将不会起作用。同时块级元素如果没有指定宽度，默认是占据父级元素宽度的100%。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin居中使用</title>
<style>
.father {
width: 200px;
margin: 10px auto;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">元素居中</div>
</body>
</html>
1.2 使用定位
该定位方法对元素种类没有要求，因为会默认转换为行内块(inline-block)，只不过需要知道元素的宽度，并将其参照元素设置定位属性。方法原理是首先left:50%;这样元素向左移动参照元素宽度一半的距离，此时还再向右移动回自己一般的距离就能保证元素水平居中：
定位居中原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位居中使用</title>
<style>
.father {
position: relative;
}
.son {
position: absolute;
width: 200px;
top: 0;
left: 50%;
margin-left: -100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son">元素居中</div>
</div>
</body>
</html>
1.3 translate方法
translate方法原理与定位一致，不过它使用更加方便，即不需要知道元素的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translate居中使用</title>
<style>
.father {
position: relative;
}
.son {
position: absolute;
width: 200px;
top: 0;
left: 50%;
transform: translate(-50%,0);
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son">元素居中</div>
</div>
</body>
</html>
二、行内块与行内元素
目前知道的方法是为父级元素添加text-align:center属性，其中父级元素不一定要求是块级元素，行内块元素亦可：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-align居中使用</title>
<style>
.father {
display: inline-block;
width: 500px;
height: 500px;
background-color: purple;
text-align: center;
}
.son {
display: inline-block;
height: 100px;
width: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son">元素居中</div>
</div>
</body>
</html>
网友评论