以下是html + css 让元素水平居中的几种方式
以下为效果图!!!
一.margin
对元素使用margin: 0 auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
box-sizing: border-box;
}
.box1{
width: 100vm;
height: 100vh;
background-color: red;
}
.box2{
width: 100px;
height: 100px;
background-color: black;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
二.left与transform相结合
PS:因为box2要在box1盒子中水平居中 所以需要将box1设置为相对定位,box2设置为绝对定位
更要注意的是!!!!!!
left的50%是其父元素宽度的百分之五十
translateX的50%是自身宽度的百分之五十
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
box-sizing: border-box;
}
.box1{
width: 100vm;
height: 100vh;
background-color: red;
position: relative;
}
.box2{
width: 100px;
height: 100px;
background-color: black;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
三.flex布局
PS:justify-content是沿着主轴方向居中 flex布局默认主轴方向是水平的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
box-sizing: border-box;
}
.box1{
width: 100vm;
height: 100vh;
background-color: red;
display: flex;
/*justify-content是沿着主轴方向居中 flex默认主轴方向是水平的 */
justify-content: center;
}
.box2{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
四.text-align居中
PS:text-align只对行内元素生效 所以先将div块级元素转为行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
box-sizing: border-box;
}
.box1{
width: 100vm;
height: 100vh;
background-color: red;
text-align: center;
}
.box2{
width: 100px;
height: 100px;
background-color: black;
/*text-align只对行内元素生效 所以先将div块级元素转为行内元素 */
display: inline-block;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>