1、text-align:center; 2、margin:0 auto; 3、display:inline-block; + text-align:center; 4、position: ...

1、Line-height 适用情景：单行文字垂直居中技巧 这个方式应该是最多人知道的了，常见于单行文字的应用，像是按钮这一类对象，或者是下拉框、导航此类元素最常见到的方式了。此方式的原理是在于将单行文字的行高设定后，文字会位于行高的垂直中间位置，利用此原理就能轻松达成垂直居中的需求 ...

图片垂直居中是个经典的问题，网上关于这个的方法也非常多，良莠不齐，本人比较推荐的以下三种简单的方法，大家可以稍做参考。1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目： “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中 ...

如下 代码： 2、使用css3样式属性display:flex设定水平垂直居中，父元素样式属 ...

父级给相对定位，子级给绝对定位，margin设置为auto，上下左右值设为0。 父级给相对定位，子级给绝对定位，设置left和top为50%，再向左和向上移动负的子级一半。 父级设置display ...

1.负margin法:这是比较常用的方法，在知道元素的宽高的前提下才能使用 注：负margin是个非常有意思的用法，深入了解后会发现他在布局上相当有用。 优点：代码量少，兼容性好。 缺点：非响应式方法，内容可能会超出容器。 2.transform法 ...

文章转载自：div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老，方法比较多，各有优劣，着情使用。 一、盒子没有固定的宽和高 方案1、Transforms 变形 这是最简单的方法，不仅能实现绝对居中同样的效果，也支持联合可变高度方式使用 ...

1.已知宽高 　　position：absolute； 　　top：50% 　　left：50%； 　　（↓↓↓↓↓↓↓↓↓↓↓↓取自身宽高一半） 　　margin-left：50%； 　 ...