元素居中的N种方式

96
YM雨蒙
2017.08.16 13:20* 字数 1129

水平居中

<1>行内元素的居中

被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。

  • text-align
<title>行内元素水平居中</title>
<style>
div{
    border:1px solid red;
    margin:20px;
}
.txtCenter{text-align:center;}
.imgCenter{text-align:center;}
</style>
</head>
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
<div class="imgCenter">![](http://upload-images.jianshu.io/upload_images/5983146-dec4b8fafded5d82.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</div>
</body>

<2>块状元素的居中

当被设置元素为 块状元素 时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素。

定宽块状元素

  • margin: value auto;
<title>定宽块状元素水平居中</title>
<style>
    div{
        border:1px solid red;
        width:200px;
        margin:20px auto;
    }
</style>
<body>
    <div>我是定宽块状元素,我要水平居中显示。</div>
</body>

不定宽块状元素

  • table + margin

table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。

优点:只需在子元素child上设置css样式,不用关心父元素的
缺点:兼容性较差,如果需要兼容,更改html样式,改为table样式

<-- css -->
<style type="text/css">
    body{margin:20px;}
    .parent{background: red;}
    .child{
        display: table;
        margin: 0 auto;
        background: blue;
        opacity: .5;
    }
</style>
<-- html -->
<div class="parent">
    <div class="child">DEMO</div>
</div>
  • inline-block + text-align

初始DEMO是块级元素,会充满父元素;inline-block默认宽度为内容宽度,然后给父元素设置text-align

优点:兼容性较好,甚至可以兼容IE6
缺点:子元素会继承父元素的text-align,使子元素里的内容也水平居中

<style type="text/css">
    body{margin:20px;}
    .parent{
        background: red;
        text-align: center;
    }
    .child{
        display: inline-block;
        background: blue;
    }
</style>
<body>
<div class="parent">
    <div class="child">DEMO</div>
</div>
</body>
  • absolute + transform

利用绝对定位和偏移解决居中问题,left:50%; 将子元素距离左边50%,translateX是将自身宽度往左偏移50%;结果是水平居中

优点:因为position:absolute;脱离文档流,所以不会影响其他的子元素;
缺点:transform是css3的内容,所以兼容性较差;

<style type="text/css">
    body{margin:20px;}
    .parent{background:#ddd;}
    .child{background:#666;color:#fff;}
    .parent{height:1.5em;}
    .parent{
        position: relative;
    }
    .child{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
</style>
</head>
<body>
<div class="parent">
    <div class="child">DEMO</div>
</div>
  • float + relative

通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。

<style>
.wrap{
    clear:both;
    float:left;
    position:relative;
    left:50%
    }
.wrap-center{
    background:#ccc;
    position:relative;
    left:-50%;
}
</style>
</head>
<body>
<div class="wrap">
    <div class="wrap-center">我们来学习一下这种方法。</div>
</div>
  • flex + justify-content

flex是弹性布局,有自己的居中属性,水平居中justify-content:center

优点:只需设置父元素,不用设置子元素
缺点:flex也是css3的,兼容性较差

<style type="text/css">
    body{margin:20px;}
    .parent{background:#ddd;}
    .child{background:#666;color:#fff;}
    .parent{
        display: flex;
        justify-content: center;
    }
    .child{
        margin: 0 auto;
    }
</style>
</head>
<body>
<div class="parent">
    <div class="child">DEMO</div>
</div>

垂直居中

<1>父元素高度确定的单行文本

通过设置父元素的heightline-height高度一致来实现的。(height:该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 )。

缺点:当文字内容的长度大于块的宽时,就有内容脱离了块。

<title>垂直居中</title>
<style>
.wrap h2{
    margin:0;
    height:100px;
    line-height:100px;
    background:#ccc;
}
</style>
</head>
<body>
<div class="wrap">
    <h2>hello world!</h2>
</div>
</body>

<2>父元素高度不确定的多行文本

  • table-cell + vertical-align

竖直居中的属性vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用。
display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。我们都知道,单元格有一些比较特别的属性,例如元素的垂直居中对齐,关联伸缩等,所以可以设置垂直居中

优点:不用添加无意义的标签
缺点:兼容性有问题

<title>垂直居中</title>
<style type="text/css">
    body{margin:20px;}
    .parent{background:#ddd;}
    .child{background:#666;color:#fff;}
    .parent{width:4em;height:500px;}
    .child{width:100%;}
    .parent{
        display: table-cell;
        vertical-align: middle;
    }
</style>
</head>
<body>
<div class="parent">
    <div class="child">DEMO</div>
</div>

下面的代码直接在div外面机加一个table tbody tr td,又因为td标签默认情况下就默认设置了vertical-alignmiddle,所以我们不需要显式地设置了。

<style>
  .wrap{height:300px;background:#ccc}
</style>
</head>
<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>

<table><tbody><tr><td class="wrap">
<div>
    ![害羞的小女生](http://upload-images.jianshu.io/upload_images/5983146-1a12aeadf25d2b5f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</div>
</td></tr></tbody></table>
</body>
  • absolute + transform

这个方法和水平居中的方法类似,唯一的区别是top:50%;,transform:translateY(-50%);

  • flex + align-items

与水平居中justify-content对应的属性align-items值为center,也可以实现垂直居中
设置display:flex;会使子元素充满父元素。因为align-items的值默认为stretch


水平垂直居中

综合水平居中和垂直居中一起

  • inline-block + text-align +table-cell +vertical-align
<title>居中</title>
<style type="text/css">
    body{margin:20px;}
    .parent{width:200px;height:300px;}
    .parent{background:#ddd;}
    .child{background:#666;color:#fff;}
    .parent{
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }
    .child{
        display: inline-block;
    }
</style>
</head>
<body>
<div class="parent">
    <div class="child">DEMO</div>
</div>
</body>
  • absolute + transform
<title>居中</title>
<style type="text/css">
    body{margin:20px;}
    .parent{width:200px;height:300px;}
    .parent{background:#ddd;}
    .child{background:#666;color:#fff;}
    .parent{
        position: relative;
    }
    .child{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
</style>
</head>
<body>
<div class="parent">
    <div class="child">DEMO</div>
</div>
  • flex + justify-content + align-items
<title>居中</title>
<style type="text/css">
    body{margin:20px;}
    .parent{width:200px;height:300px;}
    .parent{background:#ddd;}
    .child{background:#666;color:#fff;}
    .parent{
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
</head>
<body>
<div class="parent">
    <div class="child">DEMO</div>
</div>
</body>
垂直居中的搭配有很多,我们可以根据实际情况做出一个判断,然后充分了解一些居中的属性以及属性值

总结:解决此类问题,我们需要了解css属性的值和特性,了解属性以后,对问题进行分解,把特性和分解的问题进行一些联系,问题可以用那些特性实现,综合解决

后面如果在遇到不同的居中方式,会补充在这里

HTML和CSS学习之路
Web note ad 1