CSS3 flex垂直居中 水平居中终极解决方案(史上最简单的写法)

CSS3 flex垂直居中 水平居中终极解决方案(史上最简单的写法)
//align-items: center; 垂直居中
// justify-content:center; 水平居中
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
<title>RunJS 演示代码</title>

<style>
.ccs1{
width:30%; height:100px; display: -webkit-flex; display:flex;/* android 4.4 */ justify-content:center; align-items: center; background:#F00;
}
</style>
</head>
<body>
<div class="ccs1">
wefwefewfewf
</div>
</body>
</html>
</pre>

 


ps:此时如果用了 text-align: center; 在 display: flex; 下就没有水平居中效果了

注意此方法 安卓低版本不支持 所以不建议用

当然还有其他可行方案
右对齐可以采用float:right
水平居中可以用margin:0 auto;考虑到不能用float:left可以在外面再加一层容器即可
垂直居中可以参考这个文章 <a href="http://newmiracle.cn/?p=2079">http://newmiracle.cn/?p=2079</a>

 

 

posted @ 2019-11-12 14:27  newmiracle宇宙  阅读(919)  评论(0)  编辑  收藏  举报