这个方法把一些 div的显示方式设置为表格table-cell，因此我们可以使用表格的 vertical-align:middle 属性。
缺点：在IE中不支持，vertical-align只支持行内元素（有时候行内元素都失效。。。）
当内容是单行，并且高度固定，将line-height和height设置相等，可以实现垂直居中。
优点：使用于所有的浏览器，运用在小元素上是非常有用的，比如说让一个button、图片或者单行文本字段。
使用绝对定位的div，将其top设置为50%。
#content {
position: absolute;
top: 50%;
height: 240px;
margin-top: -120px; /* negative half of the height */
}
优点：适应所有浏览器。
缺点：由于高度固定，没有足够的空间，当内容超过容器的大小时，内容要么会消失，要么会出现滚动条。
水平居中 垂直居中 水平垂直居中
1 水平居中 2 垂直居中 3 水平垂直居中
本文将介绍的居中方法有 ，水平居中，垂直居中和水平垂直居中。 一水平居中 二水平垂直居中
水平居中 垂直居中 垂直水平居中 已知元素的宽高的居中布局 定位居中布局 盒模型居中布局 图片的垂直水平居中(利用...
CSS水平居中、垂直居中、水平垂直居中方法总结 文字的水平居中: 单行文字的垂直居中： 让有宽度的div水平居中：...
文字的垂直居中 元素的垂直居中
css图片水平居中 css图片垂直居中 css图片水平垂直居中
行内元素居中[#hang]垂直居中[#hc]水平居中[#hs] 块级元素居中[#kuai]垂直居中[#kc]水平居...
文字水平居中 图片水平垂直居中 图片与文字水平垂直居中 代码同上 DIV相对于页面垂直居中并且响应式 视口绝对垂直...
居中有水平居中和垂直居中。 水平居中+垂直居中 flex法 position法 就是计算呗~ 参考 CSS各种居中...
本文标题：垂直居中
本文链接：https://www.haomeiwen.com/subject/vscqyttx.html
网友评论