前端面试经典问题：CSS中居中的几种方式

.水平居中的 margin：0 auto;

关于这个，大家也不陌生做网页让其居中用的比较多, 这个是用于子元素上的，前提是不受float影响

<style>
    *{
        padding: 0;
        margin: 0;
    }
        .box{
            width: 300px;
            height: 300px;
            border: 3px solid red;
            /*text-align: center;*/
        }
        img{
            display: block;
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }
    </style>

<!--html-->
<body>
    <div class="box">
        ![](img1.jpg)
    </div>
</body>

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，去年我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

2.水平居中 text-align：center；

img的display：inline-block；类似一样在不受float影响下进行实在父元素上添加效果让它进行水平居中

<style>
    *{
        padding: 0;
        margin: 0;
    }
        .box{
            width: 300px;
            height: 300px;
            border: 3px solid red;
            text-align: center;
        }
        img{
            display: inline-block;
            width: 100px;
            height: 100px;
            /*margin: 0 auto;*/
        }
    </style>

<!--html-->
<body>
    <div class="box">
        ![](img1.jpg)
    </div>
</body>

3.水平垂直居中（一）定位和需要定位的元素的margin减去宽高的一半
这种方法的局限性在于需要知道需要垂直居中的宽高才能实现，经常使用这种方法

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            position: relative;
        }
        img{
            width: 100px;
            height: 150px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -75px;
            margin-left: -50px;
        }
    </style>
<!--html -->
<body>
    <div class="box" >
        ![](2.jpg)
    </div>
</body>

4.水平垂直居中（二）定位和margin:auto;
这个方法也很实用，不用受到宽高的限制,也很好用

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            position: relative;

        }
        img{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
<!--html -->
<body>
    <div class="box" >
        ![](3.jpg)
    </div>
</body>

5.水平垂直居中（三）绝对定位和transfrom
这个方法比较高级了，用到了形变，据我所知很多大神喜欢使用这个方法进行定位，逼格很高的，学会后面试一定要用！这个是不需要知道居中元素的宽高就可以使用的，代码里的图片稍微有点大，改改宽高，仅此而已，在面试中大部分人会问如果不知道宽高该如何居中，答这个，加分！对transform不了解的同学可以查阅一下资料了解一下！

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        width: 300px;
        height: 300px;
        background:#e9dfc7; 
        border:1px solid red;
        position: relative;

    }
    img{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>
<!--html -->
<body>
    <div class="box" >
        ![](4.jpg)
    </div>
</body>

6.水平垂直居中（四）diplay：table-cell

其实这个就是把其变成表格样式，再利用表格的样式来进行居中，很方便

<style>
    .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        img{
            width: 100px;
            height: 150px;
            /*margin: 0 auto;*/  这个也行
        }
</style>
<!--html -->
<body>
    <div class="box" >
        ![](5.jpg)
    </div>
</body>

7.水平垂直居中（五）flexBox居中

这个用了C3新特性flex,非常方便快捷，在移动端使用完美，pc端有兼容性问题，以后会成为主流的

<style>
    .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            display: flex;
            justify-content: center;
            align-items:center;
        }
        img{
            width: 150px;
            height: 100px;
        }
</style>
<!--html -->
<body>
    <div class="box" >
        ![](6.jpg)
    </div>
</body>

8.水平垂直居中（六）利用vertical-align:middle;
这方法不常见，但是一位朋友补充后我觉得也不失为一种好方法可以让别人刮目相看，这个方法关键要有一个和容器一样高的元素作为居中的一个参照就像b元素一样

<style>
    .wrap{
            width:300px;
            height:300px; 
            background:rgba(0,0,0,0.5);
            text-align:center;
            font-size:0;
            }
    .vamb{
        display:inline-block; 
        width:0px;
        height:100%;
        vertical-align:middle;
        }
    .test{
        display:inline-block;
        vertical-align:middle;
        font-size:16px;
        text-align:left;
        background:red;
        }
</style>
<body>
    <div class="wrap">
        <b class="vamb"></b>
        <div class="test">
        宽高不定<br>
        垂直水平居中
        </div>
    </div>
</body>

常见又实用的例子就先写到这，欢迎提意见，谢谢大家！喜欢请关注点个赞，也是对我的支持和鼓励！

作者：coderLfy链接：https://www.jianshu.com/p/a7552ce07c88

SS中文字居中显示的方式有以下五种：

使用text-align属性设置文本的对齐方式

将text-align属性值设置为center可以将文本居中显示。

.center {
  text-align: center;
}

使用vertical-align属性设置元素的垂直对齐方式

将vertical-align属性值设置为middle可以将文本垂直居中显示。

.center {
  vertical-align: middle;
}

使用line-height属性设置行高

将line-height属性值设置为比字体大小略大的值，可以使文本在容器中垂直居中显示。

.center {
  line-height: 20px;
}

使用display

display: flex属性将父元素设置为弹性布局，并使用align-items: center属性将子元素在交叉轴上居中对齐。

.center {
  display: flex;
  align-items: center;
}

使用position

position: absolute属性和transform: translateY(-50%)将子元素相对于其父元素垂直居中对齐。

// 父容器
.center {
  position: relative;
  height: 200px;
}

// 子容器
.center > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  height: 100px;
  width: 200px;
  background-color: #ccc;
}

以上就是CSS中文字居中显示的几种方式，根据实际需求选择合适的方式即可。

SS控制居中是前端开发中非常常用的布局技能，本文列出几种CSS控制元素居中的几种方法。

谈及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由于HTML文档流是水平方向的，所以水平方向上的布局控制比垂直方向要简单很多，居中也是如此。不过（水平）垂直居中还是有很多种写法，至少一只手是数不过来了，本文列出几种，并进行简单比较。

一、水平居中

使用CSS控制水平居中很简单：

块级元素设置width,并设置margin auto
内联元素父元素设置text-align center
HTML代码如下:

<div class="container">
 <div class="content">
 水平居中哦
 </div>
</div>

1. 块级元素水平居中

.container {
 height: 300px;
 width: 300px;
 border: 1px solid red;
}
.content {
 width: 10rem;
 border: 1px solid green;
 margin: 0 auto;
}

效果：

2. 内联元素水平居中

.container {
 height: 300px;
 width: 300px;
 border: 1px solid red;
 text-align: center;
}
.content {
 display: inline-block;
 border: 1px solid green;
}

效果：

代码很简单，而且没什么兼容性问题，所以通常也不需要用别的复杂方式来实现水平居中效果。

二、水平垂直居中

使用CSS控制垂直居中（或者水平垂直居中）就不像控制垂直居中那么方便，这里主要罗列几种。

1. flex布局

flex布局出现以后，垂直居中就很方便了，直接设置父元素：

display flex
align-items center

如果同时要水平居中，则同时设置：

justify-content center

需要注意的是IE10+才支持，webkit前缀浏览器设置flex属性需要加webkit。

.container {
 width: 300px;
 height: 300px;
 border: 1px solid red;
 display: -webkit-flex;
 display: flex; // 关键属性
 align-items: center;　// 垂直居中
 justify-content: center // 水平居中
}
.content {
 border: 1px solid green;
}

2. margin+ position:absolute布局

position: absolute布局的元素，通过设置top/bottom, left/right这两对属性，可以让元素在垂直方向和水平方向分别具有了自适应的特性。就像div在水平方向的默认表现一样!

上文中对于块级元素的水平居中，我们设置宽度然后配合以margin可以实现水平居中。而对于设置了top/bottom,left/right的absolute定位元素，我们设置宽高再配合margin就可以达到水平垂直居中：

.container {
 width: 300px;
 height: 300px;
 position: relative;
 border: 1px solid red;
}
.content {
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 width: 200px;
 height: 100px;
 margin: auto;
 border: 1px solid green;
}

效果：

兼容性很好，IE8以上支持。

3. transform + absolute

absolute定位元素的left、top属性是子元素的左边界、上边界相对父元素进行定位；transform是CSS3中非常强大的一个属性，可以接收多个属性值，包括旋转、缩放、平移等多种功能。这里使用二者配合，先将子元素左上定点定位到父元素中心点，再使用transform将子元素中心点移动到父元素的中心点即可：

.container {
 width: 300px;
 height: 300px;
 position: relative;
 border: 1px solid red;
}
.content {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%); 
 border: 1px solid green;
}

效果：

这个方法有个小缺陷，就是translate函数的参数，最后的计算值不能为小数，否则有的浏览器渲染出来效果会模糊，所以使用本方法的话最好设置一下宽高为偶数。

4. absolute+margin负值

与上一种方法很类似，上一种方法是使用transform将元素向左上平移，本方法则是使用margin负值的方式将元素拉向左上角。

代码：

.container {
 width: 300px;
 height: 300px;
 position: relative;
 border: 1px solid red;
}
.content {
 position: absolute;
 left: 50%;
 top: 50%;
 width: 200px;
 height: 100px;
 margin-top: -50px;
 margin-left: -100px;
 border: 1px solid green;
}

效果：

5. absolute + calc

从上两种方法可以看到，absolute设置了left和top再通过平移或者margin将元素重新定位回去。如果我们直接可以计算出正确的left和top值，岂不是一次到位？calc函数正有此功能，当然我们需要知道子元素的宽高：

.container {
 width: 300px;
 height: 300px;
 border: 1px solid red;
 text-align: center;
 position: relative;
}
.content {
 position: absolute;
 border: 1px solid green;
 width: 200px;
 height: 100px;
 left: calc(50% - 100px);
 top: calc(50% - 50px);
}

效果：

6. line-height + vertical-align

vertical-align是一个作用于内联元素的属性。内联元素的特性是会和其它内联元素或者文字在同一行显示，但是默认情况下是与父元素“基线对齐”的。这里的的基线指的是父元素每一行中的一个垂直位置，是英文ｘ下边缘所在的水平, 通过设置vertical-align为middle可以将内联元素的中部对齐父元素的中部（基线+字母ｘ的一半高度）。所以可以利用这一点，将父元素的行高设置为其自身高度，然后将子元素与父元素中线对齐，即可实现垂直居中。

代码：

.container {
 width: 300px;
 height: 300px;
 border: 1px solid red;
 line-height: 300px;
 text-align: center;
}
.content {
 display: inline-block;
 line-height: 1.5;
 border: 1px solid green;
 vertical-align: middle;
}

效果：

以上几种方法各有不同的适用条件，因此也有不同的优缺点，下表对各种方法进行了比较：

方法条件兼容性flex布局无IE10+margin + absolute知道子元素宽高IE8+transform + absolute无，子元素宽高应为偶数IE10+absolute + margin负值知道子元素宽高absolute + calc知道子元素宽高IE9+line-height + vertical-align知道父元素宽高

CSS中同一种表现效果往往有多种不同的实现方法，要刻意地尝试多种写法，避免熟悉了一两种方法就止步不前，这样才能对各种情况得心应手

在线咨询

上一篇：统计列表（list）中每个元素出现的次数
下一篇：好程序员HTML5大前端常用开发工具大集合

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。