欢迎大家来到IT世界,在知识的湖畔探索吧!
说到常见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>
欢迎大家来到IT世界,在知识的湖畔探索吧!
说明：这个水平居中方法，我们最熟悉了，也是最常用的，width可以固定px也可以使用百分比
方法二：table + margin
欢迎大家来到IT世界,在知识的湖畔探索吧!<!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
欢迎大家来到IT世界,在知识的湖畔探索吧!<!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有兼容性问题
原文地址：http://tangjiusheng.com/divcss/173.html
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/48645.html
