常见的div水平垂直居中方案

div水平垂直居中是我们工作中常用需求，而且面试过程中还经常可能会被问道。但是如果没有仔细研究过得同学还真不一定能答的上来。
这里我总结了几种常见的方案，以供大家参考。

1.通过设置绝对定位和设置负边距实现：

思路：通过设置div绝对定位top：50%和left50%定位到距离上边框和左边框一半的位置，然后将div的边距设为负数分别向左和向上移动自身距离的50%，就可以实现水平垂直居中了。注意：需要实现知道div的宽高。
代码：

 <style>html,body{width: 100%;height: 100%;text-align: center;box-sizing: border-box;margin: 0;}body div{box-sizing: border-box;}.parent{width: 100%;height:100%;position: relative;border: 5px solid #000000;background:#ddd;}.children{position: absolute;width:500px;height:300px;top: 50%;left: 50%; margin-left: -250px;margin-top: -150px;/* margin: auto; */background:green;}</style><div class="parent"><div class="children"></div></div>

效果如下：

优点：实现方便，兼容性好
缺点：需要实现确定居中元素的宽和高

2.通过绝对定位和translate实现

思路：原理和上面差不多，也是先通过绝对定位将div定位到上，左各一半的位置，然后通过translate，向上或者向左移动自身一半的位置。
代码：

<style>html,body{width: 100%;height: 100%;text-align: center;box-sizing: border-box;margin: 0;}body div{box-sizing: border-box;}.parent{width: 100%;height:100%;position: relative;border: 5px solid #000000;background:#ddd;}.children{position: absolute;width:500px;height:300px;top: 50%;left: 50%; transform: translate(-50%, -50%);background:green;}</style>![在这里插入图片描述](https://img-blog.csdnimg.cn/20181229105039283.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MjkxNjc1,size_16,color_FFFFFF,t_70)<div class="parent"><div class="children"></div></div>

效果：

优点：实现方便，不需要事先获取居中元素的宽高。
缺点：需要浏览器支持translate

3.通过设置绝对定位和margin：auto来实现。

原理：这个就比较神奇了，通过设置绝对定位上下左右各为0, 然后设置margin：auto便可以实现div水平垂直居中。这个解释起来比较复杂
首先，元素margin：auto后会自动计算元素的左右边距，但是上下边距还是默认0， auto。但是当元素设置为绝对定位后，元素就会脱离文档流，这是magin：auto就会自动计算上下边距了，这样就实现了水平垂直居中。
代码

<style>html,body{width: 100%;height: 100%;text-align: center;box-sizing: border-box;margin: 0;}body div{box-sizing: border-box;}.parent{width: 100%;height:100%;position: relative;border: 5px solid #000000;background:#ddd;}.children{position: absolute;width:500px;height:300px;top: 0;left: 0;right: 0;bottom: 0;margin: auto;/* transform: translate(-50%, -50%); */background:green;}</style><div class="parent"><div class="children"></div></div>

效果：同上
优点：兼容性良好，方便程度一般

4. flex布局

原理：css3新增弹性盒子模型可以直接设置元素的水平垂直居中

<style>html,body{width: 100%;height: 100%;text-align: center;box-sizing: border-box;margin: 0;}body div{box-sizing: border-box;}.parent{display: flex;justify-content: center;align-items: center;width: 100%;height:100%;border: 5px solid #000000;background:#ddd;}.children{position: absolute;width:500px;height:300px;background:green;}</style><div class="parent"><div class="children"></div></div>

效果同上
优点：十分方便，可以直接定义元素布局的排列方式。
缺点：兼容性有待处理

5.使用table-cell

原理：将父级元素设置为单元格display: table-cell，然后使用vertical-align:middle;来实现子div的垂直方向的居中，然后设置子级div 的margin：auto;实现水平方向上居中。

<style>html,body{width: 100%;height: 100%;text-align: center;box-sizing: border-box;margin: 0;}body div{box-sizing: border-box;}.parent{display: table-cell;vertical-align: middle;width: 1080px;height:700px;border: 5px solid #000000;background:#ddd;}.children{/* position: absolute; */width:500px;height:300px;background:green;margin: auto;}</style><div class="parent"><div class="children"></div></div>

效果同上，不过单元格布局不是太常用。
暂时所用的方法就这个多了，后期有新的方案会补充。如有什么bug和新的建议，欢迎各位指正。

div水平垂直居中的常用方法相关推荐

如何让div水平垂直居中
如何让div水平垂直居中 @(css)[妙瞳] 引子我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE h ...
关于DIV嵌套（二）：div嵌套div水平垂直居中
div嵌套div水平垂直居中可以使用position定位来实现,这是最常用的方法. <!DOCTYPE html> <html><head><meta cha ...
前端面试系列-CSS基础-div水平垂直居中文本居中(单行文字、多行文字)
文章目录一.div水平垂直居中 1.flex 2.position (元素已知宽高) 3.position transform (元素未知宽高度) 4.position(元素已知宽度)maigin: ...
让div水平垂直居中的六种方法
** 方法一:绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: relative;) ...
div水平垂直居中的七种方法
学习笔记(一) div水平垂直居中的七种方法文章目录学习笔记(一) 前言一.绝对定位法 1.方法一 2.方法二 3.方法三 4.方法四二.flex布局法 1.方法五三.将小div转成行内块 ...
如何实现不定宽高的div水平垂直居中
如何实现不定宽高的div水平垂直居中第一个方法:我们使用定位给父元素positon:relative,定位到中间 div{ position:absolute; top: 50%; left: 50 ...
div水平垂直居中的六种方法
在平时,我们经常会碰到让一个div框针对某个模块上下左右都居中(水平垂直居中),其实针对这种情况,我们有多种方法实现. 方法一: 绝对定位方法:不确定当前div的宽度和高度,采用 transform: ...
css div水平垂直居中
2019独角兽企业重金招聘Python工程师标准>>> div水平居中对齐使用margin-left:auto;margin-right:auto; .style{margin- ...
如何让一个div水平垂直居中
在工作中经常会碰到让一个div框针对某个模块水平垂直居中针对这种情况有多种方法现在一一实现一下一. div绝对定位水平垂直居中 margin 负间距代码: .box {width: 200 ...
CSS如何让一个div水平垂直居中
大家好,我是新来的程序猿小清,在我们前端开发中,经常会让元素水平垂直居中的,现在我来给大家带来以下几种水平垂直居中的方法,如有不如,请谅解 <body><div class = &q ...

div水平垂直居中的常用方法