css 垂直居中_CSS垂直居中、水平居中

CSS垂直居中、水平居中

让一个div或者一段文字亦或者一张照片居中显示的问题，面试的过程中也经常被问到。相信大家都日常的布局也经常会用到，回答出个三两种解决方案亦不是难事。但今天我细究了一下，发现还有新大陆可寻，特意留此博文总结一下，与君分享！如果你有新的方法，欢迎补充！

我们先从固定宽高的div开始

为方便演示，默认宽高各为'100px'的div

<div class="wrapper">
  <div class="content"></div>
</div>

以下方式全部是水平及垂直居中

方法一：padding填充

.

优点：兼容性非常好

缺点：如果父级的高度受到兄弟节点的影响，这样自己就不居中了

方法二：绝对定位

.

优点：兼容性非常好

缺点：需要提前知道div的宽高，实用性偏弱

方法三：计算属性（calc）

margin

优点：感觉不到有什么优点

缺点：不仅需要提前知道div的宽高，而且浏览器对calc的属性支持程度不一，会有兼容问题。不推荐使用，建议作为了解

接下来是不固定宽高的div

为方便演示，还是默认宽高各为100px的div

方法四：absolute + margin: auto;

.

优点：不需要提前知道尺寸，兼容性好

缺点：暂时没有什么要说的，可能理解起来比较麻烦吧

解析：

1、我们先让content脱离文档流，然后设置上右下左四个位置均为0

2、给它固定宽高，限制大小

3、利用margin属性，均分外边距

方法五：absolute + transform

.

优点：除了不用提前知道大小好像也没什么了

缺点：兼容性偏弱

方法六：父级flex布局

.wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
}

优点：写法极度简单明了

缺点：就是兼容性偏差，未来它可能是解决居中的王道（个人观点）

方法七：父级table布局

.wrapper{
    display: table-cell;
    vertical-align: middle;
}

.content{
    margin: 0 auto;
}

优点：写法极度简单明了,兼容性极好

缺点：就是有点老了

还有一个更古老（有毒）的想法：

<

说！你们是不是想说:

说实话，都9102年，谁要是在我的项目里这么干

方法八：伪元素

.

方法八（附）：伪元素的另外一种实现方式（兄弟节点）

html:

<div class="wrapper">
    <div class="content"></div>
    <div class="brother"></div>
</div>

style:

.

说实话，我也不知道这是为什么，《CSS世界》第四章在讲解这个，如果有需要PDF换私信我哦！我要跑步去了，恐怕没有时间了，下次知道原因再给家解析吧，或者评论告诉我。

再补充点吧！

方法九： line-heght（仅限单行文字垂直居中)

.

img居中

如同这样的效果：

其实上面的方法一道八变通一下，都可以实现图片的居中，这里再分享一个奇技淫巧！

.

就是background-position：center

码字不易，创造更不易，麻烦大家给一个关注吧！

微信关注「 沈志勇说 」你值得拥有！