HTML |在 div 内居中对齐 div

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