前端面试常问css布局水平居中的方法，你能回答几种？

2019-06-06 16:40·九九严选

说到常见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有兼容性问题

原文地址：http://tangjiusheng.com/divcss/173.html

举报
评论 0
    热门：