水平居中的方法有很多，最简单粗暴的方法就是margin:0 auto 水平居中，有点想不通为什么要如此折腾，以下简单列举几种；
1.使用inline-block+text-align
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
text-align: center;
}
.child{
display:inline-block;
width:200px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Demo</div>
</div>
</body>
</html>
原理：先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中
优点：兼容性好，甚至可以兼容ie6，ie7；
缺点：子元素中的文字也会水平居中，可以在child中添加text-align:left;还原；
2.使用table+margin
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.child{
width:200px;
height:100px;
background-color:red;
margin:0 auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Demo</div>
</div>
</body>
</html>
原理：先将子框设置为块级表格来显示，再设置子框居中以达到水平居中
优点：只设置了child，ie8以上都支持
缺点：不支持ie6,ie7,将Div转换成了table
3.使用absolute+transform
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
position:relative;
}
.child{
width:200px;
height:100px;
position:absolute;
left:50%;
background-color:red;
transform:translateX(-50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Demo</div>
</div>
</body>
</html>
原理：设置父框为相对定位，使父框成为子框的相对框，将子框设置为绝对定位，移动子框，使子框左侧距离相对框左侧的距离为相对框宽度的一半，再通过向左移动子框的一半宽度以达到水平居中。
优点：居中元素不会对其他的产生影响
缺点：transformcss3内容，兼容性存在一定的问题，高版本浏览器需要添加一些前缀；
4.使用flex+margin
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
display:flex;
}
.child{
width:300px;
height:100px;
background-color:red;
margin:0 auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">水平居中</div>
</div>
</body>
</html>
原理：通过CSS3中的布局利器flex将子框转换为flex item，再设置子框居中
缺点：低版本浏览器不支持（ie6,ie7,ie8）
5.使用flex+justify-content
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
display:flex;
justify-content: center;
}
.child{
width:300px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">水平居中</div>
</div>
</body>
</html>
网友评论