文章目录
- 第一种
- 第二种
- 第三种
- 第四种
- 第五种
- 第六种
第一种
绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>水平垂直居中方式1</title><style>/*使用绝对定位，不确定子div的宽高，父元素需要添加position:relative*/.father {background: red;position: relative;width: 500px;height: 500px;}.son {background: green;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}</style>
</head>
<body>
<div class="father"><div class="son">hello simon</div>
</div>
</body>
</html>
第二种
绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>水平垂直居中方式2</title><style>/*使用绝对定位，确定了子div的宽高，margin值为子div宽高的一半的负值*/.father {background: red;position: relative;width: 500px;height: 500px;}.son {width: 200px;height: 200px;background: green;position: absolute;left: 50%;top: 50%;margin-left: -100px;margin-top: -100px;}</style>
</head>
<body>
<div class="father"><div class="son">hello simon</div>
</div>
</body>
</html>
第三种
绝对定位方法：绝对定位下top left right bottom 都设置0 ，margin设置为auto
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>水平垂直居中方式3</title><style>/*使用绝对定位，确定了子div的宽高，left、right、top、bottom都设置为0，margin设置为auto*/.father {background: red;position: relative;width: 500px;height: 500px;}.son {width: 200px;height: 200px;background: green;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;}</style>
</head>
<body>
<div class="father"><div class="son">hello simon</div>
</div>
</body>
</html>
第四种
flex布局方法：当前div的父级添加flex css样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>水平垂直居中方式4</title><style>/*使用flex布局，为父div添加flex布局样式align-items和justify-content*/.father {background: red;position: relative;width: 500px;height: 500px;-webkit-display: flex;display: flex;-webkit-align-items: center;align-items: center;-webkit-justify-content: center;justify-content: center;}.son {width: 200px;height: 200px;background: green;}</style>
</head>
<body>
<div class="father"><div class="son">hello simon</div>
</div>
</body>
</html>
第五种
table-cell实现水平垂直居中: table-cell middle center组合使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>水平垂直居中方式5</title><style>/*table-cell、vertical-align、text-align组合使用*//*子div只能不能是块状元素，否则只能垂直居中，无法水平居中*/.father {width: 500px;height: 500px;display: table-cell;vertical-align: middle;text-align: center;background-color: red;}.son {width: 200px;height: 200px;background-color: green;display: inline-block;}</style>
</head>
<body>
<div class="father"><div class="son">hello simon</div>
</div>
</body>
</html>
第六种
绝对定位：calc() 函数动态计算实现水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>水平垂直居中方式6</title><style>.father {position: relative;border: 1px solid #f40;background-color: #f30;width: 80vw;height: 80vh;}.son {position: absolute;width: 30vw;height: 30vh;background-color: #ff0;left: -moz-calc((80vw - 30vw)/2);top: -moz-calc((80vh - 30vh)/2);left: -webkit-calc((80vw - 30vw)/2);top: -webkit-calc((80vh - 30vh)/2);left: calc((80vw - 30vw)/2);top: calc((80vh - 30vh)/2);}</style>
</head>
<body>
<!--绝对定位+calc()动态计算实现水平垂直居中-->
<div class="father"><div class="son">hello simon</div>
</div>
</body>
</html>
