如何实现HTML元素的水平和垂直居中（每天一个知识点）
时间：2023-03-30 22:19:17
CSS
在前端页面开发中，HTML元素的水平和垂直居中是需要经常处理的问题。今天我们就来系统的学习一下如何在HTML中实现水平居中和垂直居中。通过对主流水平和垂直居中实现方式的实践，找到适合特定情况的布局实现方式，逐步达到灵活运用的水平。水平居中方式一：text-align:center（仅限内联元素）text-align属性定义了内联元素（比如文本）如何相对于它们的块级父元素对齐。当它的值为center时，可以使行中的元素居中。<样式>.box1{宽度：200px；高度：200px；背景颜色：橙色；文本对齐：居中；}一段文字展示
二：margin:0automargin用于设置块元素的偏移量，其值有四个参数，分别代表：上、右、下、左（顺时针）四个方向的偏移量。它的值可以缩写为二。第一个值表示上下边的偏移量，第二个值表示左右边的偏移量。当我们设置左右两边的偏移量为auto时，就意味着我们让浏览器自己选择一个合适的偏移量，这样左右就可以水平居中了。<样式>.box2{宽度：75%；背景颜色：石灰；保证金：0自动；}
一段文字演示 方法三：基于relativeLayout实现水平居中我们可以将一个元素设置为浮动元素，然后将其定位设置为relative，并将其子元素的定位设置为相对。然后将父元素的左值设置为50%，并向右移动50%，然后我们将子元素的左值设置为-50%，使其移动50%的位置在相反的方向，这样就可以达到同样的定心效果。<样式>.box3{浮动：左；位置：相对；左：50%；}.box4{位置：相对；左：-50%；}
