常见css布局水平居中的6种方法

 分类:div+css教程时间:2019-06-06点击:

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


除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: