HTML |在 div 内居中对齐 div

1]使用Transform和Translate将Div垂直和水平居中

• 首先，设置 位置 父元素的属性 相对的 .
• 接下来，设置子元素的 位置 财产 绝对 , 最佳 至 50% ， 和 剩下 至 50% .
• 最后，使用 变换：翻译（-50%，-50%） 真正使子元素居中：

 .parent_div {  
 字体大小：24px；  
 边距：25px；  
 宽度：350 像素；  
 高度：200px；  
 轮廓：黑色虚线 1px；  
 /* 设置 */  
 **位置：相对；  
** }  
 .child_div {  
 宽度：50px；  
 高度：50px；  
 背景颜色：红色；  
  **/* 垂直和水平居中 */  
 位置：绝对；  
 最高：50%；  
 左：50%；  
 变换：翻译（-50%，-50%）；** }

2] 使用 Flexbox 使 Div 垂直和水平居中

• Flexbox 是使元素垂直和水平居中的最简单方法。

• 要水平和垂直居中子元素，请应用 证明内容：中心 和 对齐项目：中心 到父元素：

  。容器 { 字体系列：arial； 字体大小：24px； 边距：25px； 宽度：350 像素； 高度：200px； 轮廓：黑色虚线 1px； **/* 垂直和水平居中 */ 显示：弯曲； 证明内容：中心； 对齐项目：居中；** }

  。孩子 {
  宽度：50px；
  高度：50px；
  背景颜色：红色；
  }

参考 - https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/24416/21031008

标签：居中,50px,50%,HTML,对齐,div,元素
来源： https://www.cnblogs.com/amboke/p/16675951.html