|
css 完美垂直居中解决方案兼容ie8以上等其他浏览器
<pre>
<!DOCTYPE html>
<html>
<head>
<title>DIV水平垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#outer {
display:table;
height:400px;
#position:relative;
overflow:hidden;
}
#middle {
width:300px;
height: 400px;;
display:table-cell;
vertical-align:middle;
#position:absolute;
#top:50%;
background: #F0E68C;
}
#inner {
#position:relative;
#top:-50%;
}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
水平居中</br>
水平居中</br>
水平居中</br>
水平居中</br>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
//显示浏览器版本
document.getElementById('ver').innerHTML = navigator.userAgent;
</script>
</pre>
移动端的写法
<pre>
<!DOCTYPE html>
<html>
<head>
<title>DIV水平垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#middle {
width:30%;
height: 10rem;
display:table-cell;
vertical-align:middle;
background: #F0E68C;
}
</style>
</head>
<body>
<div id="middle">
水平居中</br>
水平居中</br>
水平居中</br>
水平居中</br>
</div>
</body>
</html>
</pre>
ps:不能用绝对定位否则失效(可以加到外面一层)
还有个绝对定位居中的方法
<pre>
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
</pre>
| 
|手机版|小黑屋|Java自学者论坛
( 声明：本站文章及资料整理自互联网，用于Java自学者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2021-5-28 06:54:12