说到常见css布局，面试时经常也会考考大家，看对css知识掌握的咋样，对css盒模型理解没，比如会问css布局水平居中的方法或者css布局垂直居中的方法等，今天分享常见css布局水平居中??种方法??/p>
方法一??/strong>margin + width
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>css布局水平居中margin + width</title>
<style type="text/css">
*{margin:0;padding:0;}
.box{
width:100px;
margin:0 auto;
background:red;
}
</style>
</head>
<body>
<div class="box">Demo</div>
</body>
</html>
说明??/strong>这个水平居中方法，我们最熟悉了，也是最常用的，width可以固定px也可以使用百分比
方法二：table + margin
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>css布局水平居中table + margin</title>
<style type="text/css">
*{margin:0;padding:0;}
.box{
display: table;
margin: 0 auto;
background:red;
}
</style>
</head>
<body>
<div class="box">Demo</div>
</body>
</html>
说明??/strong>display: table在表现上类似block元素，但是宽度为内容宽。无需设置父元素样??（支??IE 8 及其以上版本）兼??IE 8 一下版本需要调整为<table>
方法三：inline-block + text-align
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>css布局水平居中inline-block + text-align</title>
<style type="text/css">
*{margin:0;padding:0;}
.content{
text-align:center;
}
.box{
display:inline-block;
background: red;
}
</style>
</head>
<body>
<div class="content">
<div class="box">Demo</div>
</div>
</body>
</html>
说明??/strong>兼容性佳（甚至可以兼??IE 6 ??IE 7??/p> 方法四：absolute + margin-left 说明??/strong>宽度固定相比于使用transform ，有兼容性更??/p> 方法五：absolute + transform 说明??/strong>绝对定位脱离文档流，不会对后续元素的布局造成影响。transform??CSS3 属性，有兼容性问??/p> 方法六：flex + justify-content 说明??/strong>只需设置父节点属性，无需设置子元素flex有兼容性问??/p> 原文地址：http://tangjiusheng.com/divcss/173.html<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>css布局水平居中absolute + margin-left</title>
<style type="text/css">
*{margin:0;padding:0;}
.content{
position: relative;
}
.box{
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px;
background: red;
}
</style>
</head>
<body>
<div class="content">
<div class="box">Demo</div>
</div>
</body>
</html>
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>css布局水平居中absolute + transform</title>
<style type="text/css">
*{margin:0;padding:0;}
.content{
position: relative;
}
.box{
position: absolute;
left: 50%;
transform: translateX(-50%);
background: red;
}
</style>
</head>
<body>
<div class="content">
<div class="box">Demo</div>
</div>
</body>
</html>
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>css布局水平居中flex + justify-content</title>
<style type="text/css">
*{margin:0;padding:0;}
.content{
display: flex;
justify-content: center;
}
.box{
width: 100px;
background: red;
}
</style>
</head>
<body>
<div class="content">
<div class="box">Demo</div>
</div>
</body>
</html>