四种方法实现css布局水平居中

最新推荐文章于 2023-09-30 13:11:25 发布

没有老婆

最新推荐文章于 2023-09-30 13:11:25 发布

阅读量316

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_45041748/article/details/117673008

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了四种CSS布局方法：margin+width、table+margin、inline-block+text-align以及absolute+margin-left，帮助开发者快速掌握水平居中的不同解决方案，提升页面布局的灵活性和兼容性。

摘要由CSDN通过智能技术生成

4种方法实现css布局水平居中

方法一：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>

方法二：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 一下版本需要调整为

方法三：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>

方法四：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 ，有兼容性更好

没有老婆

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
四种方法实现css布局水平居中

4种方法实现css布局水平居中方法一：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;pa
复制链接

扫一扫