垂直居中：

1、最简单的就是知道父盒子和子盒子的高度，计算子盒子和父盒子的高度差，然后除以二，在子盒子中使用margin-top即可

2、display:table-cell和vertical-align:middle

display:table-cell属性让标签元素以表格单元格的形式呈现，类似于td标签

image.png

给父元素添加float和position（值为fixed和absolute）属性会破坏这个布局，给子元素添加position（值为fixed和absolute）属性也会破坏

3、给盒子添加绝对定位（子绝父相）

子盒子中设置top: 50%;transform: translateY(-50%);，这个情况可以不必知道子盒子的宽高也能垂直居中

image.png

水平居中

1、最简单的margin:0 auto;
2、将盒子转为行内快，然后使用text-align:center属性居中

image.png

3、使用绝对定位居中（子绝父相）

image.png

CSS-让盒子水平垂直居中（2019/1/31）
垂直居中： 1、最简单的就是知道父盒子和子盒子的高度，计算子盒子和父盒子的高度差，然后除以二，在子盒子中使用mar...
CSS解决盒模型居中的问题
CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法 CSS实现盒子模型水平居中的方法全局样式第一种：...
一些小技巧
1、定位的盒子水平/垂直居中对齐的完美写法之前让我们定位的盒子水平居中对齐的写法是这样子的水平居中：left:5...
CSS布局小技巧
1.让元素水平垂直居中文字水平垂直居中 2.让元素垂直居中 2.1 flex方式 2.2 position方式 ...
盒子水平垂直居中的几种方式
盒子水平垂直居中的几种方式 1 2 3 position+translate
前端学习第三天- margin和浮动
想让盒子(div)居中 1 让盒子中的内容居中--文本或者行内，行内块元素水平居中：让盒子本身水平居中，而不是内...
盒子模型（元素居中）
一、盒子垂直水平居中 1、定位盒子宽高已知， position: absolute; left: 50%; t...
元素居中的方式
1 水平居中 2 垂直居中 3 水平垂直居中
不定宽高的div盒子和不定宽高的盒子水平垂直居中
让一个不定宽高的div，垂直水平居中的几种实现方式不定宽高的div垂直居中的方式： 1、使用CSS方法：父盒子...
CSS3实现居中的常用方法总结
在前端开发项目中，经常用到盒子的水平垂直居中。盒子的水平居中相对容易实现，垂直居中的实现相对复杂一些，在这里主要总...