css设置元素在页面居中的的各种方式

最新推荐文章于 2025-11-05 16:43:41 发布

原创最新推荐文章于 2025-11-05 16:43:41 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

本文介绍了CSS布局中实现元素水平居中的六种常见方法，包括margin+width、table+margin、inline-block+text-align、absolute+margin-left、absolute+transform和flex+justify-content。每种方法都有其适用场景和兼容性考虑，例如margin+width适用于固定宽度元素，table+margin支持IE8及以上，absolute+transform则需关注CSS3兼容性，而flex+justify-content则是现代布局的首选，但不支持老版本浏览器。

方法一：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有兼容性问题