<html>
<head>
<meta charset="UTF-8">
<title>center</title>
<style>
.tac {text-align: center;}
.posr {position: relative;}
.wrap {width:300px;height:150px;border:1px solid #111;margin-bottom: 30px;}
/*1 table-cell 居中*/
.center {display: table;}
.center > * {display: table-cell;vertical-align: middle; }
/*2 height 等于 line-height 居中*/
.center1 {height: 100px;line-height: 100px;}
/*3 flex*/
.center2 { display: flex; justify-content:center; align-items: center;}
/*4 绝对定位和0*/
.center3 { width: 50%;height: 50%;margin: auto;position: absolute;top: 0;left: 0;bottom: 0;right: 0;border:1px solid #111; }
/*5 绝对定位和负边距*/
.center4 { position: absolute; width:100px; height: 50px; top:50%; left:50%; margin-left:-50px; margin-top:-25px; text-align: center; border:1px solid #111;}
</style>
</head>
<body>
<div class="wrap center tac">
<div>
<a href="">table-cell</a>
</div>
</div>
<div class="wrap center1 tac">
<div>
<a href="">line-height == height</a>
</div>
</div>
<div class="wrap center2">
<div>
<a href="">flex</a>
</div>
</div>
<div class="wrap posr">
<div class="center3">
<a href="">绝对定位和0</a>
</div>
</div>
<div class="wrap posr">
<div class="center4">
<a href="">绝对定位和负边距</a>
</div>
</div>
</body>
</html>CSS 元素垂直居中的 方法总结
猜你喜欢
转载自blog.csdn.net/blueblueuueew/article/details/69945360
今日推荐
周排行