【前端】几种实现水平垂直居中的方法总结

本文主要是介绍【前端】几种实现水平垂直居中的方法总结，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

实现代码:

<!DOCTYPE html>
<html>
<head><title>垂直居中</title><meta charset="utf-8"><script type="text/javascript"></script><style type="text/css">/* 方法 1  子元素 position:absolute 0 0 0 0*/#container1{width: 400px;height: 400px;position: relative;background-color: #f5f5f5;}#item1{width: 200px;height: 200px;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: #03c03c;}/* 方法 2  子元素 position:absolute*/#container2{margin-top: 20px;width: 400px;height: 400px;position: relative;background-color: #f5f5f5;}#item2{width: 200px;height: 200px;position: absolute;left: 50%;margin-left: -100px;top: 50%;margin-top: -100px;background-color: #03c03c;}/* 方法 3 子元素 position:relative*/#container3{position: relative;margin-top: 20px;width: 400px;height: 400px;background-color: #f5f5f5;}#item3{width: 200px;height: 200px;position: relative;left: 50%;margin-left: -100px;top: 50%;margin-top: -100px;background-color: #03c03c;}/* 方法 4 line-height*/#container4{width: 400px;height: 400px;line-height: 100px;background-color: #f5f5f5;margin-top: 20px;}#item4{width: 200px;height: 200px;margin: 0 auto;background-color: #03c03c;}/* 方法 5  display:flex*/#container5{width: 400px;height: 400px;display: flex;align-items: center;justify-content: center;background-color: #f5f5f5;margin-top: 20px;}#item5{width: 200px;height: 200px;background-color: #03c03c;}/* 方法 6  display:box; */#container6{height: 400px;width: 400px;margin-top: 20px;background-color: #f5f5f5;display: -webkit-box;display: box;-webkit-box-align: center;-webkit-box-pack: center;box-align: center;box-pack: center;}#item6{height: 200px;width: 200px;background-color: #03c03c;}</style>
</head>
<body>
<div id="container1">CONTAINER1<div id="item1">ITEM1</div>
</div><div id="container2">CONTAINER2<div id="item2">ITEM2</div>
</div><div id="container3">CONTAINER3<div id="item3">ITEM3</div>
</div><div id="container4">CONTAINER4<div id="item4">ITEM4</div>
</div><div id="container5"><div id="item5"></div>
</div><div id="container6"><div id="item6"></div>
</div>
</body>
</html>

这篇关于【前端】几种实现水平垂直居中的方法总结的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！