2023面试高手

这个屌丝很懒，什么也没留下！

热门标签

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

作者：2023面试高手 | 2024-06-11 10:05:02

踩

gbk居中

说到常见css布局，面试时经常也会考考大家，看对css知识掌握的咋样，对css盒模型理解没，比如会问css布局水平居中的方法或者css布局垂直居中的方法等，今天分享常见css布局水平居中的6种方法。

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>

这个水平居中方法，我们最熟悉了，也是最常用的，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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/702698