移动端垂直居中对齐

方法一:利用CSS3的transform:translate

.center{
    width:50%;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

方法二:利用flexbox

.center {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

对比:方法二的技巧会高些,但是方法一的兼容性更好
				
时间: 2024-05-07 00:21:06

移动端垂直居中对齐的相关文章

文本如何做到垂直居中对齐

文本如何做到垂直居中对齐:建议:尽可能的手写代码,可以有效的提高学习效率和深度.网页布局中经常用到让文本在一行中垂直居中对齐.默认情况下文本是居上对齐的.实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <

随机图片大小在DIV中垂直居中对齐总结

老遇到这种样式 现在总结一下 <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> *{margin:0;padding:0;line-height: 1;font-size: '宋体';padding

css-实现元素垂直居中对齐

原文:css-实现元素垂直居中对齐 css-实现元素/元素内容,垂直居中对齐 一.单行内容的垂直居中(line-height:行高方法) 只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height 和 height,并使两值相等,就可以了. 缺点:1:这种方法局限性太大,只有单行文本的元素才适用,所以在多行元素中是不能使用这种方法的了.         2 :IE中不支持<img>等的居中. 优点:适合在所有浏览器,没有足够空间时,内容不会被切掉,同时支持块级和内联元

div中字垂直居中对齐

div中的文本水平居中,一般都是用text-align:center;就可以解决,那么垂直居中呢,知道vertiacl-align:middle;但有时候却不起作用:整理下div中文本垂直居中对齐的问题(只是自己总结)1.单行文本垂直居中对齐① height=line-height即可: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml

CSS制作水平垂直居中对齐

作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀,要正确的选择也是一件不容易的事情.我会将这几种方法一一介绍给大家,以供大家参考.或许对于我这样的初学者有一定的帮助. 用CSS来实现元素的垂直居中效果是件苦差事,虽然说实现方法有多种,但有很多方式在某些浏览器下可能无法正常的工作.接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足之处

bootstrap modal 垂直居中对齐

bootstrap modal 垂直居中对齐 文章参考 http://www.bubuko.com/infodetail-666582.html http://v3.bootcss.com/JavaScript/#modals Html代码   <div class="modal fade" id="sqh_model"> <div class="modal-dialog"> <div class="mod

如何将一个绝对定位的div水平垂直居中对齐

如何将一个绝对定位的div垂直居中对齐:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在某些时候可能需要将一个绝对定位的div在它的父对象中垂直居中对齐,可能用到的频率不是太高,但是偶尔也会用到,下面就简单介绍一下如何实现此功能.在通常情况下,可以为元素添加margin:0px auto即可让元素在它的父元素水平居中,然后再将它设置为垂直居中对齐即可.但是为绝对定位的对象添加margin:0px auto并不能生效,所以说还是要用老办法实现.代码示例如下: <!DOCTYPE html>

网页中图片的垂直居中对齐

相信很多前端开发人员都曾遇到过需要将图片设置为垂直居中对齐的经历,我刚好在之前的一个项目刚刚解决了这个问题,使用的方法非常简单,兼容性也很好.具体做法如下: 1.只需要兼容各大现代浏览器: 父元素{ display:teble-cell; width:Npx; height:Npx; vertical-align:middle;} 2.如果要兼容IE7以前的低版本IE浏览器: 父元素{ display:teble-cell; width:Npx; height:Npx; vertical-ali

Lodop条形码竖条和值右端不对齐的解决方法

当Lodop条形码设置的宽度比较短,数值比较多的时候,会出现条码的竖条和右端不对齐.个人测试了一下,发现解决办法有三种:1.增加条形码的宽度.2.隐藏条码本身的值,用text文本代替.3.修改条形码下方数值的大小.默认的数值文字大小是9,缩小后可以显示在条码下方,和右端对齐,就是文字会比较小,比较条码本身设置的比较小.测试代码: <head> <meta http-equiv="Content-Type" content="text/html; charse