常见css布局水平居中的6种方法
说到常见css布局，面试时经常也会考考大家，看对css知识掌握的咋样，对css盒模型理解没，比如会问css布局水平居中的方法或者css布局垂直居中的方法等，今天分享常见css布局水平居中的6种方法。
方法一：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>这个水平居中方法，我们最熟悉了，也是最常用的，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>说明：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>说明：兼容性佳（甚至可以兼容 IE 6 和 IE 7）
方法四：absolute + margin-left
<!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>说明：宽度固定相比于使用transform ，有兼容性更好
方法五：absolute + transform
<!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>说明：绝对定位脱离文档流，不会对后续元素的布局造成影响。transform为 CSS3 属性，有兼容性问题
方法六：flex + justify-content
<!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>说明：只需设置父节点属性，无需设置子元素flex有兼容性问题
除注明外的文章,均为来源:老汤博客,转载请保留本文地址！
原文地址：https://tangjiusheng.cn/divcss/173.html
原文地址：https://tangjiusheng.cn/divcss/173.html
大家都在看