网站建设资讯
为您提供网站建设行业资讯、网站优化知识、主机域名邮箱、网站开发常见问题等。
div垂直居中的三种方式是什么？
我们都知道，固定高宽的div在网页中垂直居中很简单，相信大家也很容易的写出来，但是不是固定高宽的div如何垂直居中呢？我们在网页布局，特别是手机等web端网页经常是不固定高宽的div，那么这些div如何垂直居中呢？这篇文章，我总结一下。
方法1：固定宽高元素水平垂直居中
通过margin平移元素整体宽度的一半，使元素水平垂直居中。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>固定宽高元素水平垂直居中</title>
<style>
.parent {
height: 140px;
position: relative;
border: 2px dashed #f69c55;
}
.child {
width: 200px;
height: 80px;
padding: 10px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -110px;
background: black;
color: #fff;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">测试文本，测试文本。</div>
</div>
</body>
</html>效果图：
方法2：未知宽高元素水平垂直居中
利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>未知宽高元素水平垂直居中</title>
<style>
.parent {
height: 140px;
position: relative;
border: 2px dashed #f69c55;
}
.child {
padding: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
background: black;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">测试文本，测试文本。</div>
</div>
</body>
</html>效果图：
方法3：利用flex布局
利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>利用flex布局实现元素水平垂直居中</title>
<style>
.parent {
height: 140px;
display: flex;
justify-content: center;
align-items: center;
border: 2px dashed #f69c55;
}
.child {
padding: 20px;
background: black;
color: #fff;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">测试文本，测试文本。</div>
</div>
</body>
</html>效果图：
本站文章均为光雨网络深圳网站建设摘自权威资料，书籍，杂志或原创文章，如有版权纠纷或者违规问题，请即刻联系我们删除，我们欢迎您分享到社交网站，引用和转载，我们谢绝直接复制和抄袭！感谢您...
猜你喜欢
微信公众号
微信询价
