1. HTML如何让网页居中
在Web页面制作中，让页面元素居中是非常重要的调整方式。因为网页上往往有很多内容，左右有空白或者左右有过宽或者过窄的空间都会不利于用户的使用体验。下面介绍html如何让网页居中。
1.1 让单个元素居中
目前有三种在HTML中为单个元素实现居中的方法: margin属性、text-align属性、transform属性。
1.1.1 使用margin属性让单个元素居中
使用margin属性实现元素的水平居中操作，是三种方法中最基本且易于掌握的。具体如下：
<div class="parent">
<div class="child"> Lorem Ipsum </div>
</div>
.parent {
display: flex;
justify-content: center;
align-items: center;
}
.child {
margin: 0 auto;
}
justify-content: center;属性使子元素水平居中，align-items: center;让子元素垂直居中，margin: 0 auto;让元素水平居中
1.1.2 使用text-align属性让单个元素居中
<div class="parent">
<div class="child"> Lorem Ipsum </div>
</div>
.parent {
text-align: center;
}
.child {
display: inline-block;
}
text-align: center;属性使父元素内内联元素居中，display: inline-block;让内联元素可以设置宽高，且不会因为块元素的特性而换行。
1.1.3 使用transform属性让单个元素居中（兼容性强的方法）
<div class="parent">
<div class="child"> Lorem Ipsum </div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
position: relative;让父元素成为一个相对定位的容器了，position: absolute;让子元素的位置相对于父元素，top: 50%;让子元素距离父元素顶部距离为50%，left: 50%;让子元素距离父元素左部距离为50%，transform: translate(-50%, -50%);是新的技术，它是将子元素向上和向左移动，距离是自身宽高的一半。
1.2 让页面的内容居中
让页面的内容居中操作复杂度要求要低一点，只需要操作一个地方即可。下面让我们来看看两种方式。
1.2.1 让整个页面居中
<body>
<div class="wrapper">
<!--聊天框-->
</div>
</body>
body {
display: flex;
justify-content: center;
}
.wrapper {
width: 1000px;
}
display: flex;和justify-content: center;让子元素（这里是wrapper）在父元素（这里是body）的水平中心。
1.2.2 让选定的元素居中
<div class="parent">
<div class="child"> Lorem Ipsum </div>
</div>
.parent {
display: flex;
justify-content: center;
}
display: flex;和justify-content: center;让子元素水平居中。
2. 总结
到这篇文章的最后，我想说的是：让网页居中的方式还有很多，需要根据实际情况选择相对应的方法。总体来说，针对单个元素，可以使用margin、text-align和transform三种方式实现居中，针对页面层面的元素，可以使用display:flex&justify-content:center实现居中。希望本文对您有所帮助。