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

2023-04-27 11:35•css•阅读 710

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">

<head>

<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>

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>

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